Event jQuery Focus () By Example

jQuery focus() event

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

$(selector).focus()  

This triggers the focus event for the selected elements.

$(selector).focus(function)  

Parameters of jQuery focus()

ParameterDescription
functionOptional. 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>  

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *