jQuery .focusin() Method

What You’ll Learn

The .focusin() method is jQuery’s legacy shorthand for binding and triggering the focusin event. This tutorial covers .focusin(handler) since 1.0, .focusin(eventData, handler) since 1.4.3, no-argument .focusin() as a trigger, migration to .on("focusin") and .trigger("focusin"), and why the binding form is deprecated since jQuery 3.3. For the modern focusin event API, see the jQuery focusin event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .focusin(), .focus(), .blur(), and more. The .focusin() method let you react when focus enters an element or any descendant in one call: $("#form").focusin(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .focusin() matters when reading older parent-form delegation code. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles — .on("focusin", handler) for binding and .trigger("focusin") for firing.

Understanding the .focusin() Method

The official jQuery API describes .focusin() as a way to bind an event handler to the focusin event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the element or any nested descendant gains focus — the bubbling focusin event that .on("focusin") handles today.

When you call .focusin() with no arguments, jQuery synthetically fires the focusin event on each matched element. Bound handlers run — useful for testing parent-level handlers. To move keyboard focus to an input, use .trigger("focus") instead; the browser fires both focus and focusin automatically.

📝 Syntax

The .focusin() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("focusin") is preferred:

1. Bind a handler — .focusin( handler ) (since 1.0, deprecated 3.3)

.focusin( handler )

• handler — function executed each time focusin fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "focusin", handler ).

2. Bind with eventData — .focusin( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.focusin( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "focusin", eventData, handler ).

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

.focusin()

• No arguments — triggers focusin on every matched element.
• Runs bound focusin handlers (including on ancestors when bubbled).
• To move keyboard focus, use .trigger("focus") on the target input.
• Preferred replacement: .trigger( "focusin" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).focusin( function() {
  alert( "Handler for `focusin` called." );
} );

// Modern binding
$( "#target" ).on( "focusin", function() {
  alert( "Handler for `focusin` called." );
} );

// Deprecated trigger
$( "#target" ).focusin();

// Modern trigger
$( "#target" ).trigger( "focusin" );

Return value

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

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .focusin() to .on("focusin"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .focusin(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

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

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

Handler on <p> — focusin bubbled up from nested input

Deprecated — prefer .on("focusin", fn) for new code

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

Focus any input inside #profile-form
→ all inputs get blue border, #out shows theme

event.data.theme shared via one .focusin() on the form

Modern equivalent: .on("focusin", { theme: "blue" }, fn)

var count = 0;

$( "#target" ).focusin( function() {
  count++;
  $( "#out" ).text( "Target focusin handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#target" ).focusin();
} );

Focus into #target → count increments

Click #fire → $("#target").focusin() → same handler runs

No-arg .focusin() is trigger shorthand — prefer .trigger("focusin")

$( "#legacy" ).focusin( function() {
  $( "#out" ).text( "Legacy: .focusin(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "focusin", function() {
  $( "#out" ).text( "Modern: .on('focusin', function(){ ... }) — use this for new code." );
} );

Focus into #legacy → legacy deprecation message

Focus into #modern → modern .on("focusin") message

Behavior is identical — only the API name differs

$( "#form" )
  .focusin( function() {
    $( "#hint" ).text( "Helper: nested input focused." ).show();
  } )
  .focusin( function() {
    $( this ).toggleClass( "active", true );
  } );

User clicks or tabs into #form

First handler shows #hint text

Second handler adds .active class

Both handlers run in bind order on each focusin

🚀 Common Use Cases

• Reading legacy code — recognize $("#form").focusin(fn) as equivalent to .on("focusin", fn) in older form scripts.
• Parent paragraph handler — legacy code binds $("p").focusin(fn) to react when nested inputs gain focus.
• Form container binding — $("#form").focusin(fn) highlights active fields without per-input bindings.
• Shared eventData — $("#form").focusin({ theme: "blue" }, fn) passes config to one parent handler.
• Chained handlers — stacked .focusin(fn) calls show hints and add .active on the form.
• Maintaining WordPress themes — many admin and front-end scripts still use .focusin() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .focusin(handler) or .focusin(eventData, handler) in new code. Use .on("focusin") instead.
• Bind with .focusin(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .focusin() triggers the event since jQuery 1.0 — prefer .trigger("focusin").
• .focusin(handler) binds on matched elements — for selector filtering use .on("focusin", "input", fn).
• Native focusin bubbles — that is why parent .focusin(fn) catches nested input focus.
• Pair with focusout on the same parent for complete enter/exit tracking.
• Remove handlers with .off("focusin") — not by calling .focusin(undefined).
• For the full modern focusin event guide — delegation and dynamic forms — see the jQuery focusin event tutorial.

💡 Best Practices