blur()

The jQuery blur event occurs when element loses focus. It can be generated by via keyboard commands like tab key or mouse click anywhere on the page.

It makes you enable to attach a function to the event that will be executed when the element loses focus. Originally, this event was used only with form elements like <input>. In latest browsers, it has been extended to include all element types.

The blur () method is often used together with focus () method.

Syntax:

snippet

$(selector).blur()

It triggers the blur event for selected elements.

snippet

$(selector).blur(function)

It adds a function to the blur event.

Parameters of jQuery blur() event

Parameter	Description
Function	It is an optional parameter. It is used to specify the function to run when the element loses the focus (blur).

Example of jQuery blur() event

Let's take an example to demonstrate jQuery blur() event.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $("input").blur(function(){
        alert("This text box has lost its focus.");
    });
});
</script>
</head>
<body>
Enter your name: <input type="text">
</body>
</html>

Output:

Note

Note: Write your name in the input field, and then click outside the field to lose focus (blur).