jQuery Focus Event

What You’ll Learn

The focus event fires when an element gains focus — the user clicks into a field, tabs to it, or you call .trigger("focus"). This tutorial covers binding with .on("focus"), passing eventData, triggering programmatically, comparing focus with blur and focusin, and practical patterns like helper text and auto-focus on load.

Introduction

Every login form, search box, and modal dialog depends on knowing which field currently has keyboard focus. The focus event tells you an element just became the active target — ideal for showing hints, highlighting borders, or moving the cursor into the first empty field.

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

Understanding the focus Event

The focus event is sent to an element when it gains focus. By default it applies to form controls — <input>, <textarea>, <select> — and links (<a>). Modern browsers extend it to any element with an explicit tabindex attribute.

An element gains focus when the user clicks it, tabs to it with the keyboard, or when JavaScript calls .trigger("focus"). Focused elements are usually highlighted by the browser (for example, a dotted outline) and receive keyboard events first. jQuery normalizes cross-browser quirks — including IE’s asynchronous native focus — so your handlers behave consistently.

📝 Syntax

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

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

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

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

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

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

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

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

.trigger( "focus" )

• Moves keyboard focus to the element and runs bound focus handlers.
• Use .triggerHandler("focus") to run handlers without moving focus.
• Only trigger on visible elements — hidden targets error in IE.

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

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

Official jQuery API examples

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

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

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 expand on the official focus demos for hints, auto-focus, and delegation. Use the Try-it links to run each snippet in the browser.

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

Click into #target or tab to it
→ alert: "Handler for focus called."

Handler runs once each time the field gains focus

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

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

Click #other → $("#target").trigger("focus")
→ cursor moves to #target, alert runs

Same as clicking or tabbing into the field directly

$( "input" ).on( "focus", function() {
  $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
} );

Focus first input → "focus fire" span appears, fades over 1s

Focus second input → same animation on that row

$(this).next("span") targets the sibling hint element

$( function() {
  $( "#login" ).trigger( "focus" );
} );

Page loads → #login receives focus automatically

User can type immediately without clicking the field

Equivalent to HTML autofocus attribute via jQuery

$( "#signup-form" ).on( "focusin", "input", function() {
  $( "#signup-form input" ).removeClass( "active" );
  $( this ).addClass( "active" );
} );

Tab into any input → .active class on that field only

Click "Add field" → new input gets same highlight behavior

One handler on #signup-form covers all inputs

🚀 Common Use Cases

• Helper text — show format hints when the user enters a field; hide on blur.
• Active styling — add a blue border or .active class on focus for clear visual feedback.
• Auto-focus login — $("#login").trigger("focus") on page load or when a modal opens.
• Keyboard shortcuts — a button that calls $("#search").trigger("focus") to jump to the search box.
• Clear on focus — select all text in an input when the user clicks in: $(this).select() inside the focus handler.
• Dynamic forms — delegated focusin on the form for inputs added via AJAX.

📝 Notes

• Bind with .on("focus", handler) since jQuery 1.7 — not the deprecated .focus(handler) method.
• Trigger with .trigger("focus") since jQuery 1.0.
• Native focus does not bubble — use focusin or jQuery delegation for parent-level handlers.
• jQuery maps focus to focusin in delegation methods since 1.4.2.
• In Internet Explorer, native focus is asynchronous — jQuery 3.7+ uses focusin as the backing event in IE for consistency.
• Do not .trigger("focus") on hidden elements in IE — it throws an error. Use visible fields only.
• Use .triggerHandler("focus") to run handlers without moving keyboard focus.
• Use .off("focus") to remove handlers — avoid deprecated .unbind("focus").

💡 Best Practices