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>