jQuery Blur Event Trigger Example

jQuery Blur Event Trigger Example

jQuery blur event method; In this tutorial, you will learn jQuery blur event with example. And as well as how to use the jQuery blur event method with HTML elements.

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.

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

ParameterDescription
FunctionIt 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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *