jQuery Focus () Event Method Example

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


This triggers the focus event for the selected elements.


Parameters of jQuery focus()

functionOptional. Specifies the function to run when the focus event occurs

Example 1 – jQuery focus() event

Let’s see simple example with demonstrate jQuery focus() event.

<!doctype html>  
<html lang="en">  
  <meta charset="utf-8">  
  <title>Focus Example</title>  
  span {  
    display: none;  
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
 <p><input type="text"> <span>Focus starts.. Write your name.</span></p>  
<p><input type="password"> <span>Focus starts.. Write your password.</span></p>  
$( "input" ).focus(function() {  
  $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 2000 );  

Leave a Comment