jQuery focus event method; In this tutorial, You will learn how to use jQuery focus event with example.
jQuery Focus() Event Method
jQuery Focus event occurs when an element receives focus. This is generated by a mouse click or navigating it. And This event is applicable to a set of elements, such as form elements (<input>, <div>, <span>, <a>, <p>, <ul>, <li>, <button>, etc.).
Syntax jQuery Focus() Event Method
$(selector).focus()
This triggers the focus event for the selected elements.
$(selector).focus(function)
Parameters of jQuery Focus() Event Method
| Parameter | Description |
| function | Optional. Specifies the function to run when the focus event occurs |
Example of 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>
Recommended jQuery Tutorials
Recommended:-Event jQuery Mouseleave By Example
Recommended:-jQuery Event Mouseenter Example
Recommended:-jQuery Get Data Text, Id, Attribute Value By Example
Recommended:-Set data attribute value jquery
Recommended:-select multiple class in jquery
Recommended:-How to Remove Attribute Of Html Elements In jQuery
Recommended:-Get radio button value jquery by id, name, class
Recommended:-jQuery scrolltop animate example
Recommended:-jQuery – Remove Elements From array jQuery
Recommended:-Array to Comma Separated String jQuery
Recommended:-jQuery Ajax Form Submit with FormData Example
Recommended:-jQuery Form Validation Custom Error Message
