Updated April 1, 2023
Introduction to JQuery Blur()
The JQuery Blur() Events are something which occur when someone performs an operation in a web application. Some of the common events are a mouse click, submitting a form, hovering mouse over an element, etc. Using jQuery, such events can be handled in a very simple yet effective way. Here, we are going to focus on one such event type, blur event and the way it is listened to and handled.
The JQuery Blur() event gets triggered when an element loses its. It is basically an user interaction with a web application where a user is trying to remove the focus from a particular. blur() method in jQuery is an inbuilt method which basically attaches an event handler function to a form field or This function is invoked when a blur event occurs, that is, the form field loses focus or triggers a blur. blur() method is generally used together with focus() method and both work just opposite to each. Previously, the blur event was applicable only to form elements such as <input> but now it can be applied to all element types.
Syntax
To trigger an event for a selected element
$(selector).blur();To attach an event handler (function) to the blur event
$(selector).blur( handler );Here, handler is an optional parameter which specifies the function to be executed when the blur event occurs.
$(selector).blur( [eventData], handler );Here, eventData is an object which contains some data to be passed to the event handler and handler is the function to be executed whenever the blur event occurs. selector refers to the selected HTML element to which blur() method associates an event handler. blur() method is a short hand for on() or trigger() method with blur event as its first parameter.
Examples to Implement blur() method in jQuery
Let us go through few examples to understand better.
Example #1
When no function is passed as an argument to blur() method: In the given example, we have not attached any event listener or event handler to the blur() method. blur() method simply removes the focus from the selected input element once we click anywhere outside the input field box.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$(this).css("background-color", "blue");
$("input").blur();
});
});
</script>
</head>
<body>
<b>Your comments:
<input type="text"/></b>
<button id="btn">
<b>Click to see blur event</b>
</button>
<h3 style="color:red;">
This is an example of jQuery blur event when no function is passed as an argument to blur method.
</h3>
</body>
</html>Output:
The below screen shows up when the page is first loaded in the browser and no operation is performed. Here, input field is yet to receive any input from the user.
We enter some inputs in the input The focus is still in the input field.
As soon as the button is clicked, the input field loses its focus .
Example #2
When a function is passed as an argument to blur() method: Here, blur() method associates an event handler function to the selected html. The code written inside this function gets executed when the html element or the form field loses its focus.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("input").blur(function() {
$(this).css("background-color", "#BBDBE5");
alert("The blur event has occurred ");
});
});
</script>
</head>
<body>
<b>Your comments: <input type="text"/></b>
<h3 style="color:red;">
This is an example of jQuery blur event. Click anywhere outside the field and the field will lose its focus.
</h3>
</body>
</html>Output:
This is the screen which shows up when the page is first loaded in the browser and there is no operation performed.
The below screen shows up when we type something in the input field and then click anywhere outside the box.
An alert window pops up saying that “The blur event has occurred”.
- We see that as soon as we click anywhere outside the input box, along with the alert window pop up, the background color of the input box changes.
- This happened because the field lost its focus.
- The logic for color change is written inside the event handler function.
- This event handler function is associated to the input field by blur() method.
Example #3
Let us understand the difference between focus and blur events: focus() method, just like blur() method, attaches an event handler function to an HTML element or a form field. This function gets executed when the form field gets the focus blur() and focus() methods are often used together but they work just opposite.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("input").focus(function() {
$(this).css("background-color", "#E5D2BB");
});
$("input").blur(function() {
$(this).css("background-color", "#BBDBE5");
});
});
</script>
</head>
<body>
<h3>Course Name: <input type="text" name="course name" /></h3>
<h3>Course Duration: <input type="number" name="course duration" /></h3>
</body>
</html>Output:
- The below screen shows up when the page is first loaded in the browser and no operation is performed.
- Here, we have two input fields which are empty at this point.
- Now, we enters values in the input field and then the focus is moved on to the next input field.
- As soon as the focus is moved out of the field, the background color of the first field changes from Solitaire (#E5D2BB) to Pale Blue (#BBDBE5)
- Now, the focus is in the second field which has Solitaire (#E5D2BB) background color.
- Now, when the focus is removed from both the fields, they have the same background color, that is both of the fields have lost focus.
Conclusion
From this article, we are, more or less aware of what is a jQuery event, how the jQuery blur event occurs and the way it is handled. To summarize, Events are basically the user interactions which are detected by a web application. jQuery event listeners or event handlers are assigned to HTML DOM elements to register such events. These registered behaviors can be modified in a more advanced way using jQuery event methods. They are useful in creating dynamic web pages.
Recommended Articles
This is a guide to JQuery Blur(). Here we discuss the introduction to JQuery Blur(), with appropriate Syntax and respective examples. You can also go through our other related articles to learn more –
