In this tutorial, you will learn about jQuery blur event with example. And as well as how to use the jQuery blur event method with HTML elements.
jQuery Blur Event Method
The jQuery blur event occurs when an element loses focus. This can happen uniquely through tab navigation or mouse interactions, including clicks anywhere on the page.
Syntax of jQuery Blur Event Method
$(selector).blur()
This triggers the blur event for the selected elements.
$(selector).blur(function)
Parameters of jQuery blur() events Method
| Parameter | Description |
| Function | It is an optional parameter. It is used to specify the function to run when the element loses the focus (blur). |
Examples of jQuery blur() Event Method
Let’s take first example for demonstrate jQuery blur(); as shown below:
<!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>
Let’s take second example for demonstrate jQuery blur(); as shown below:
<!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.
Recommended jQuery Tutorials
Recommended:-jQuery | Event MouseUp By Example
Recommended:-Event jQuery Mouseleave By Example
Recommended:-jQuery Event Mouseenter Example
Recommended:-Event jQuery MouseOver & MouseOut By Example
Recommended:-keyup jquery event example
Recommended:-Event jQuery. Blur By Example
Recommended:-jQuery – Remove All Unwanted Whitespace From String
Recommended:-jQuery form submit event with example
Recommended:-keydown function jQuery
Recommended:-List of jQuery Events Handling Methods with examples
Recommended:-Jquery Selector by .class | name | #id | Elements
Recommended:-Get the Current Page URL in jQuery
Recommended:-jQuery Ajax Get() Method Example
