jQuery Focusin Event

What You’ll Learn

The focusin event fires when an element gains focus — or when any element inside it gains focus. Unlike focus, it bubbles up the DOM, so one handler on a parent form can react to every nested input. This tutorial covers .on("focusin"), eventData, delegation, comparison with focus and focusout, and the official jQuery paragraph demo.

Introduction

Large forms with dozens of inputs are hard to manage if you bind .on("focus", fn) on every field individually. The focusin event solves this: it fires when an element gains focus or when any descendant gains focus, and it bubbles up to parent nodes.

The official jQuery API recommends pairing focusin with focusout for enter/exit tracking on containers. Bind with .on("focusin") since 1.7. jQuery also uses focusin internally when you delegate .on("focus", "input", fn) since 1.4.2.

Understanding the focusin Event

The focusin event is sent to an element when it gains focus, or when any element inside of it gains focus. This is distinct from the focus event: focus fires only on the focused element and does not bubble; focusin bubbles so parent containers can listen once for all nested fields.

When a user tabs into an input inside a <form>, the browser fires focus on the input and focusin on the input, the form, and every ancestor up to the document. jQuery’s .on("focusin", "input", fn) on the form catches every current and future input without rebinding.

📝 Syntax

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

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

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

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

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

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

Native focus does not bubble. jQuery’s delegated .on("focus", "input", fn) works because jQuery maps it to the bubbling focusin event internally since 1.4.2. Binding .on("focusin", ...) directly makes the bubbling behavior explicit in your code.

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

.trigger( "focusin" )

• Runs bound focusin handlers on the matched element.
• To move keyboard focus, use .trigger("focus") — the browser fires both focus and focusin.
• Use .triggerHandler("focusin") to run handlers without bubbling side effects.

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

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

Official jQuery API example

$( "p" ).on( "focusin", function() {
  $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
} );

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

Example 1 is the official jQuery API paragraph demo. Examples 2–5 cover form delegation, focus vs focusin bubbling, eventData, and dynamic fields. Use the Try-it links to run each snippet in the browser.

$( "p" ).on( "focusin", function() {
  $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
} );

Tab into input inside first <p>
→ "focusin fire" span appears on that paragraph, fades over 1s

Handler runs on the <p> parent — focusin bubbled up from the input

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

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

Previous field loses .active automatically

One binding on #signup-form — no per-input handlers

var log = [];

$( "#wrapper" ).on( "focus", function() {
  log.push( "focus on wrapper (will NOT run for nested input)" );
} );

$( "#wrapper" ).on( "focusin", function() {
  log.push( "focusin on wrapper (runs when input inside gains focus)" );
  $( "#out" ).text( log.join( " | " ) );
} );

Focus nested input inside #wrapper
→ only "focusin on wrapper" appears in #out

Direct .on("focus") on wrapper never fires for child input focus

$( "#profile-form" ).on( "focusin", { theme: "blue" }, "input", function( event ) {
  $( this ).css( "border-color", event.data.theme );
  $( "#out" ).text( "Focused: " + $( this ).attr( "name" ) + " | theme: " + event.data.theme );
} );

Focus first name → border turns blue, #out shows name and theme

Focus email → same eventData.theme on every field

One { theme: "blue" } object shared across all inputs

var count = 0;

$( "#dynamic-form" ).on( "focusin", "input", function() {
  $( "#dynamic-form input" ).removeClass( "active" );
  $( this ).addClass( "active" );
  $( "#status" ).text( "Active: " + $( this ).attr( "name" ) );
} );

$( "#add-field" ).on( "click", function() {
  count += 1;
  $( "#dynamic-form" ).append(
    '<input type="text" name="extra' + count + '" placeholder="Extra ' + count + '">'
  );
} );

Click "Add field" → new input appended

Tab into new input → .active and #status update

Delegation on #dynamic-form covers future inputs automatically

🚀 Common Use Cases

• Parent form highlighting — one .on("focusin", "input", fn) on the form highlights whichever field is active.
• Nested containers — official demo: bind on <p> to react when any child input gains focus.
• Dynamic AJAX forms — fields added after load still trigger the same delegated focusin handler.
• Wizard steps — track which section the user is editing via focusin on step containers.
• Pair with focusout — enter/exit styling on the same parent without per-field bindings.
• Accessibility audit — log focusin on document during keyboard navigation testing.

📝 Notes

• Bind with .on("focusin", handler) since jQuery 1.7.
• Trigger with .trigger("focusin") since jQuery 1.0 — runs handlers; use .trigger("focus") to move keyboard focus.
• Native focusin bubbles — ideal for parent-level and delegated handlers.
• Native focus does not bubble — bind directly on the input for single-field handlers.
• jQuery maps delegated .on("focus", selector, fn) to focusin since 1.4.2.
• Pair with focusout on the same parent for complete enter/exit tracking.
• Use .triggerHandler("focusin") to run handlers without bubbling propagation.
• Use .off("focusin") to remove handlers — avoid deprecated .unbind("focusin").

💡 Best Practices