Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery lose focus event

Improve Article
Save Article
  • Last Updated : 29 Jul, 2020
Improve Article
Save Article

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)

or

$(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=
    </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=
    </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>


Output:
Normal Output

  • When clicked inside the input text-field
  • When clicked outside the text field, it displays this pop-up

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!