Skip to content
Related Articles

Related Articles

Improve Article
jQuery | blur() with Examples
  • Last Updated : 12 Feb, 2019

The blur() is an inbuilt method is jQuery that is used to remove focus from the selected element. This method start the blur event or it can be attached a function to run when a blur event occurs.
Syntax:

$(selector).blur(function)

Parameter: It accepts an optional parameter “function”.
Return Value: It does not return anything, it simply trigger the blur event on the selected element.

jQuery code to show the working of blur() function:

Code #1:
In the below code, no function is passed to the blur method.




<html>
  
<head>
               jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                $("input").blur();
                $("p").html("This is blur method that is used!!!");
            });
        });
    </script>
</head>
  
<body>
    <!--enter value and click on the button -->
    Enter Value:
    <input type="text">
    <br>
    <br>
    <button id="btn">start blur event!!!</button>
    <p style="color:green"></p>
</body>
  
</html>

Output:
Before entering any value to the “Enter Value” box-

After entering a value of “GeeksforGeeks” to the “Enter Value” box-

After clicking the “start blur event” button-

Code #2:
In the below code, function is passed to the blur method.




<html>
  
<head>
             jquery/3.3.1/jquery.min.js"></script>
    <script>
        <!-- jQuery code to show blur method -->
        $(document).ready(function() {
            $("input").blur(function() {
                $(this).css("background-color", "#ADFF2F");
            });
        });
    </script>
</head>
  
<body>
    <!-- Enter a value to the field and click outside
         to see the change -->
    Enter Value:
    <input type="text" name="fullname">
</body>
  
</html>

Output:
Before entering any value to the “Enter Value” box-

After entering a value of “GeeksforGeeks” to the “Enter Value” box-

After clicking the mouse button anywhere on the screen-




My Personal Notes arrow_drop_up
Recommended Articles
Page :