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> 