jQuery blur event
The blur
event in jQuery is used to detect when an element, such as an input field, textarea, or select box, loses focus. This event is often used to perform actions like validation, hiding hints, or resetting styles when the user moves away from the element.
Basic Syntax
To attach a blur
event handler in jQuery, you use the following syntax:
$(selector).blur(function(event) {
// Code to execute when the element loses focus
});
Example Usages
1. Basic Blur Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blur Event Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myInput").blur(function() {
alert("Input field lost focus!");
});
});
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="Click and then click away">
</body>
</html>
Explanation:
$("#myInput").blur(function() {...})
attaches a blur event handler to the input field with the IDmyInput
.- When the input field loses focus (e.g., when the user clicks away from it), an alert box appears with the message "Input field lost focus!".
2. Validating Input
You can use the blur
event to validate user input when they move away from a field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blur Event Example</title>
<style>
.error {
color: red;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#email").blur(function() {
var email = $(this).val();
var isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
if (isValid) {
$("#error").hide();
} else {
$("#error").show();
}
});
});
</script>
</head>
<body>
<input type="text" id="email" placeholder="Enter your email">
<div id="error" class="error">Please enter a valid email address.</div>
</body>
</html>
Explanation:
- When the input field with ID
email
loses focus, it checks whether the email format is valid. - If the email is invalid, an error message is displayed; otherwise, the message is hidden.
3. Hiding a Tooltip
You can use the blur
event to hide a tooltip or hint when the user moves away from an input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blur Event Example</title>
<style>
.hint {
display: none;
font-size: 12px;
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myInput").focus(function() {
$("#hint").show();
}).blur(function() {
$("#hint").hide();
});
});
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="Focus to see hint">
<div id="hint" class="hint">Enter your text here.</div>
</body>
</html>
Explanation:
- When the input field gains focus, a hint (
#hint
) is shown. - When the input field loses focus, the hint is hidden.
Event Object
The blur
event provides the following properties and methods:
event
- The event object that is passed to the event handler.event.target
- The element that triggered the event.event.type
- The type of the event (e.g., "blur").
Event Delegation
To handle blur
events for dynamically added elements, use event delegation:
$(document).on('blur', 'input.dynamicElement', function() {
// Handle blur event for dynamically added input elements with class "dynamicElement"
});
Explanation:
$(document).on('blur', 'input.dynamicElement', ...)
attaches a blur event handler to input elements with the classdynamicElement
, even if they are added dynamically after the page loads.
Use Cases
- Form Validation: Validate or process form input values when they lose focus, such as checking for required fields or displaying error messages.
- User Experience Enhancement: Provide feedback, such as hiding tooltips or hints, when the user interacts with form fields.
- Resetting Styles: Revert styles or visual changes applied when the element gained focus.
Performance Considerations
- Debouncing: For elements where changes or validations are frequent, consider debouncing to avoid performance issues.
- Efficient Selectors: Use efficient selectors to ensure smooth performance, especially with large forms or multiple elements.