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>
    <script src="https://ajax.googleapis.com/ajax/libs/
               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>
    <script src="https://ajax.googleapis.com/ajax/libs/
             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>