jQuery focus event method; Through this tutorial, i am going to show you what is focus() event method and how to use it with HTML elements in jQuery.
jQuery Focus () Event Method
A jQuery Focus event occurs when an element receive focus. This is generated by a mouse click or navigating it.
This event is used for a limited set of elements such as elements such as <input>, <select> , and the <a href> etc.
Syntax jQuery Focus () Event Method
$(selector).focus()
This triggers the focus event for the selected elements.
$(selector).focus(function)
Parameters of jQuery focus()
| Parameter | Description |
| function | Optional. Specifies the function to run when the focus event occurs |
Recommended:-jQuery Click() Event Example
Example 1 – jQuery focus() event
Let’s see simple example with demonstrate jQuery focus() event.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Focus Example</title>
<style>
span {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p><input type="text"> <span>Focus starts.. Write your name.</span></p>
<p><input type="password"> <span>Focus starts.. Write your password.</span></p>
<script>
$( "input" ).focus(function() {
$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 2000 );
});
</script>
</body>
</html>