jQuery Blur Event

What You’ll Learn

The blur event fires when an element loses focus — the user tabs away, clicks elsewhere, or you call .trigger("blur"). This tutorial covers binding with .on("blur"), passing eventData, triggering programmatically, comparing blur with focus and focusout, and practical form-validation patterns.

Introduction

Forms and interactive pages depend on knowing when a user finishes with a field. The blur event tells you an element no longer has focus — ideal for validating input, trimming whitespace, saving drafts, or hiding inline hints.

The official jQuery API distinguishes the blur event (bound with .on("blur") since 1.7) from the deprecated .blur() method used in older code. To programmatically run blur handlers, use .trigger("blur") — available since jQuery 1.0.

Understanding the blur Event

The blur event is sent to an element when it loses focus. Originally this applied mainly to form controls — <input>, <textarea>, and <select>. Modern browsers extend it to any focusable element, including elements with tabindex.

An element loses focus when the user presses Tab to move to the next control, clicks another part of the page, or when JavaScript moves focus elsewhere. jQuery normalizes cross-browser quirks — including IE’s asynchronous native blur — so your handlers behave consistently.

📝 Syntax

The modern jQuery API for the blur event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("blur" [, eventData ], handler) (since 1.7)

.on( "blur" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time blur fires: function( event ) { ... }.

2. Event delegation — .on("blur", selector, handler)

$( "#form" ).on( "blur", "input", function( event ) {
  // jQuery maps blur to focusout for delegation since 1.4.2
} );

Native blur does not bubble. jQuery works around this in delegation by mapping blur to the bubbling focusout event.

3. Trigger the event — .trigger("blur") (since 1.0)

.trigger( "blur" )

• Runs bound blur handlers on the matched element(s).
• Useful when you need validation before submit even if the user never tabbed out of a field.

4. Unbind — .off("blur" [, selector] [, handler])

$( "#target" ).off( "blur" );              // remove all blur handlers
$( "#form" ).off( "blur", "input", fn );   // remove delegated handler

Official jQuery API examples

$( "#target" ).on( "blur", function() {
  alert( "Handler for `blur` called." );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "blur" );
} );

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 show real-world form patterns. Use the Try-it links to run each snippet in the browser.

$( "#target" ).on( "blur", function() {
  alert( "Handler for `blur` called." );
} );

User focuses #target, then tabs away or clicks elsewhere
→ alert: "Handler for blur called."

Handler runs once each time the field loses focus

$( "#target" ).on( "blur", function() {
  alert( "Handler for `blur` called." );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "blur" );
} );

Tab away from #target → alert runs

Click #other → $("#target").trigger("blur") → same alert


Programmatic trigger invokes bound handlers

$( "#email" ).on( "blur", function() {
  var value = $( this ).val().trim();
  var isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test( value );

  $( "#email-error" ).toggle( !isValid && value.length > 0 );
  $( this ).toggleClass( "invalid", !isValid && value.length > 0 );
} );

User types "not-an-email" and tabs away
→ #email-error appears, .invalid class added

User types "user@example.com" and tabs away
→ error hidden, .invalid removed

$( "#name" ).on( "blur", function() {
  var trimmed = $( this ).val().trim();
  $( this ).val( trimmed );
  console.log( "Saved name:", trimmed );
} );

User types "  Jane Doe  " and tabs away
→ input value becomes "Jane Doe"
→ console: Saved name: Jane Doe

$( "#signup-form" ).on( "focusout", "input", function() {
  var $field = $( this );
  var empty = $field.val().trim().length === 0;
  $field.toggleClass( "required-missing", empty );
} );

Tab out of empty input → .required-missing added

Tab out of filled input → .required-missing removed

New input appended to form → same handler applies

🚀 Common Use Cases

• Field validation — check email, phone, or password format when the user leaves the input.
• Trim & normalize — strip whitespace, fix casing, or format phone numbers on blur.
• Auto-save drafts — persist textarea content when focus leaves the editor.
• Hide helper text — pair with focus to show hints on entry and hide on exit.
• Force validation before submit — $("#email").trigger("blur") inside a submit handler.
• Dynamic forms — delegated focusout on the form for inputs added via AJAX.

📝 Notes

• Bind with .on("blur", handler) since jQuery 1.7 — not the deprecated .blur(handler) method.
• Trigger with .trigger("blur") since jQuery 1.0.
• Native blur does not bubble — use focusout or jQuery delegation for parent-level handlers.
• jQuery maps blur to focusout in delegation methods since 1.4.2.
• In Internet Explorer, native blur is asynchronous — jQuery 3.7+ uses focusout as the backing event in IE for consistency.
• Any focusable element can receive blur — not limited to <input> and <textarea>.
• Use .off("blur") to remove handlers — avoid deprecated .unbind("blur").

💡 Best Practices