jQuery Blur Event Method Example

by

jQuery blur event method example; Through this tutorial, i am going to show you how to use blur event with THML elements using jQuery blur event method.

jQuery Blur Event Method

jQuery blur event occurs when element loses focus. It can be generated anywhere by tabs or mouse commands, such as mouse clicks anywhere on the page.

jQuery blur() method Syntax

The syntax of jQuery blur() method:

$(selector).blur()

This triggers the blur event for the selected elements.

$(selector).blur(function)

Parameters of jQuery blur() events

ParameterDescription
FunctionIt is an optional parameter. It is used to specify the function to run when the element loses the focus (blur).
Recommended:-jQuery Events List with Example

Example 1 – jQuery blur() method

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.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>
Recommended:-jQuery Click() Event Example

Example 2 – jQuery blur() method

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>  
$(document).ready(function(){  
 $( "#field1" ).blur(function() {
  alert( "Lose focus from Field1" );
});
});  
</script>  
  <meta charset="utf-8">
  <title>jQuery: Attach a function to the blur event</title>
</head>
<body>
<form>
<input id="field1" type="text" value="First Field">
<input id="field2" type="text" value="Second Field">
</form>
  <p>Write something in the input First Field, and then click outside the field to check lose focus.</p>
</body>
</html>

The jQuery events (handler) method is used to bind an event handler to a “blur” javascript event, or an event that is triggered.

Leave a Comment