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 ID myInput.
  • 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 class dynamicElement, 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.