jQuery lose focus event

Last Updated : 29 Jul, 2020

Lose focus event can occur mainly through focusout() and blur() method. Both of them lose focus when the method gets triggered. These events differ slightly from each other but all of them serve the main purpose of losing focus.
Focusout() is often used in combination with focusin() and blur() is often used in combination with focus().

Note that focusout() method also gets triggered when child elements lose focus.

Syntax:

$(selector).focusout(function)

$(selector).blur(function)

Here, function is the parameter, which is optional and occurs when focusout() and blur() method get triggered.

Example 1: This example shows the use of focusout() to lose focus.

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function () { 
            $("div").focusin(function () { 
                $(this).css("background-color", "#008000"); 
            }); 
            $("div").focusout(function () { 
                $(this).css("background-color", "#FFFFFF"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <div style="border: 1px dashed green;padding:10px;"> 
        Course: <input type="text"><br> 
    </div> 
  
    <p> 
        Clicking outside the input text field enables  
        triggering of focusout event. 
    </p> 
</body> 
  
</html> 

Output:

Normal Output:
When clicked inside the input text-field:
When clicked outside the text field, it gets back to normal:

Example 2: This example shows the use of blur() to lose focus.

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function () { 
            $("input").blur(function () { 
                alert("Losefocus event occurs"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 style="color:Green;"> 
        GeeksforGeeks 
    </h1> 
      
    <div style="border: 1px dashed green;padding:10px;"> 
        Course: <input type="text"><br> 
  
    </div> 
      
    <p> 
        Clicking outside the input text field  
        enables triggering of blur event. 
    </p> 
</body> 
  
</html> 