jQuery blur() Method

Last Updated : 11 Jul, 2025

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

Syntax:

$(selector).blur(function)

Parameters:

It accepts an optional parameter "function".

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

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

HTML

<!DOCTYPE html>
<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:

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

HTML

<!DOCTYPE html>
<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>