jQuery blur() Event

jQuery blur() event occurs when an element losses focus. This is applicable only to form element. An element can lose focus either from keyboard commands or from mouse clicks.

Syntax of blur() Event

$(selector).blur(function) 

The selector is the element on which blur event trigger. The function is an optional parameter. This function is called when the element loses focus.

Example

<form>
<p>Enter your name:</p> 
<input type="text" id="txt">  
</form>

<script>
(function( $ ) {
$("input#txt").blur(function(){  
alert("This input box has lost its focus.");  
});  
})(jQuery); 
</script>

Output of the above code

In the above example, the blur event handler is bound to the input field and alerts the message on loses focus.

Example

<form>
<p>Enter your name:</p> 
<input type="text" id="blr">  
</form>

<script>
(function( $ ) {
$("input#blr").blur(function(){  
$("input#blr").css("background-color", "pink");
});  
})(jQuery);  
</script>

Output of the above code

In the above example, The blur event handler is bound to the input field and sets the input box background color to pink.