Trigger Blur Event on Input in jQuery

This guide demonstrates how to programmatically trigger a blur event on an input field using jQuery. In JavaScript, a blur event occurs when an element loses focus. By using jQuery's built-in event methods, you can simulate this behavior via code to run validation routines, hide tooltips, or update styling without requiring manual user interaction.

The Recommended Method: .trigger('blur')

The modern, recommended standard in jQuery is the .trigger() method. Calling .trigger('blur') on an input element will execute any event handlers attached to the blur event and remove the visual focus from the input field.

// Target the input by its ID and trigger the blur event
$('#myInput').trigger('blur');

You can also use this on classes or tag selectors:

// Trigger blur on all text inputs
$('input[type="text"]').trigger('blur');

The Shorthand Method: .blur()

Older versions of jQuery provide a direct shortcut method named .blur(). When called without arguments, it triggers the blur event on the selected elements:

// Shorthand syntax
$('#myInput').blur();

Note: While .blur() is functional in existing codebases, using .trigger('blur') or .on('blur', ...) is preferred in modern jQuery (version 3.3+) because several event shorthands are deprecated.

Triggering Handlers Without Native Unfocus: .triggerHandler('blur')

If you only want to execute the custom event handlers bound to the element without altering the actual browser focus or navigating away from the active field, use .triggerHandler():

// Executes attached blur handlers without removing browser focus
$('#myInput').triggerHandler('blur');

Complete Example

Here is a practical example showing how to attach a blur event listener and fire it with a button click:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Blur Example</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

  <input type="text" id="username" placeholder="Click here, then click button">
  <button id="triggerBtn">Trigger Blur</button>

  <script>
    $(document).ready(function() {
      // Attach the blur handler
      $('#username').on('blur', function() {
        console.log('The input field has lost focus.');
      });

      // Trigger the blur event programmatically
      $('#triggerBtn').on('click', function() {
        $('#username').trigger('blur');
      });
    });
  </script>

</body>
</html>