Here we will show you to make a field with jquery focus. You have listened this word many times but didn’t practice in real life. First i will explain autofocus meaning then you will show full code with real example.

Autofocus:

The autofocus attribute is a boolean attribute (All HTML elements can have attributes).When present, it specifies that an <input> element should automatically get focus when the page loads.

Autofocus Uses:

We can use this attribute directly in the <input> tag see below example its not necessary to use it only in input attribute you can use it wherever you want.

Example:

 First name: <input type="text" name="fname" autofocus><br>
 <button type="button" autofocus>Click Me!</button>

 jQuery Focus:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $("span").css("display", "inline").fadeOut(2000);
    });
});
</script>
<style>
span {
    display: none;
}
</style>
</head>
<body>

<input>

<span>Nice to meet you!</span>
<p>Click in the input field to get focus.</p>

</body>
</html>

If you want to learn further about jQuery focus. See this link

About The Author

Related Posts

Leave a Reply

Your email address will not be published.