jQuery .focusin() Method

What Is .focusin()?

.focusin() is jQuery’s legacy shorthand for binding or triggering the bubbling focusin event — when an element or a descendant gains focus. Binding is deprecated since 3.3; modern code uses .on("focusin") / .trigger("focusin").

// Legacy (still works; bind form deprecated since 3.3)
$("p").focusin(function () {
  // this <p> or a nested input gained focus
});

// Modern replacements
$("p").on("focusin", handler);     // bind
$("p").trigger("focusin");         // fire handlers

// Better for dynamic forms (delegation)
$("#form").on("focusin", "input", handler);

How to Use .focusin()

Recognize the legacy API in old code, then migrate to .on() / .trigger().

1. Bind with .focusin(handler) (legacy) or .on("focusin", handler) (preferred).
2. Optionally pass eventData: .focusin(data, handler) → .on("focusin", data, handler).
3. Trigger with no-arg .focusin() (legacy) or .trigger("focusin") (preferred).
4. Bind on a parent to catch nested input focus (bubbling).
5. For dynamic fields, use delegated .on("focusin", selector, fn) — not .focusin().

Pseudocode

// Legacy
call parent.focusin(handler)
    → bind "focusin" on parent

when nested input gains focus:
    fire "focusin" on input
    event bubbles to parent
    call handler(event)

call parent.focusin()
    → trigger "focusin" on parent (handlers only)

// Modern
call parent.on("focusin", handler)
// or with delegation for dynamic fields:
call parent.on("focusin", "input", handler)

to migrate:
    .focusin(fn)      → .on("focusin", fn)
    .focusin(data, fn) → .on("focusin", data, fn)
    .focusin()        → .trigger("focusin")

Cheat Sheet

Quick map from the shorthand to modern APIs.

Live Preview

Focus nested fields. The form uses legacy .focusin(handler) (still available in jQuery 3.x).

Ready — focus a field or pick an action.

jQuery Examples

Short, copy-ready snippets. Prefer .on("focusin") for new projects; these demos show the legacy API you will still meet in older code.

$("p").focusin(function () {
  var label = $(this).find("label").text() || "field";
  $("#out").text("focusin via .focusin(fn) — " + label.trim());
});

Focus an input inside a <p>
Handler runs on that paragraph (bubbling)

$("#profile").focusin({ form: "profile" }, function (event) {
  var name = $(event.target).attr("name") || "(container)";
  $("#out").text("form=" + event.data.form + " | target=" + name);
});

Focus city → "form=profile | target=city"
event.data.form is shared for every nested focus

$("#box").focusin(function () {
  $("#out").text("focusin handler fired on #box.");
});

$("#fire").on("click", function () {
  $("#box").focusin(); // prefer .trigger("focusin")
});

Click #fire → no-arg .focusin() runs
Bound handler updates #out
Keyboard focus may stay on the button

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

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

Focus inside #legacy → legacy message
Focus inside #modern → modern message
Behavior is the same — API name differs

var log = [];
$("#wrapper").focus(function () {
  log.push("focus on wrapper (will NOT run)");
});
$("#wrapper").focusin(function () {
  log.push("focusin on wrapper (runs)");
  $("#out").text(log.join(" | "));
});

Focus nested input
→ only "focusin on wrapper (runs)"
.parent .focus(fn) never fires

Performance Notes

The shorthand and .on("focusin") cost the same for a single bind. Prefer .on() for clarity and delegation. Keep the callback light.

Key Takeaways