jQuery Focus Event

What Is the focus Event?

The focus event fires when an element gains focus — the user clicks into a field, tabs to it, or you call .trigger("focus"). Bind with .on("focus", handler) (jQuery 1.7+). Focus does not bubble; use focusin for parent-level handlers.

$("#target").on("focus", function () {
  // field gained focus
});

$("#target").trigger("focus");   // move focus + run handlers
$("#target").triggerHandler("focus"); // handlers only (no move)

// focus does NOT bubble → for forms use focusin
$("#form").on("focusin", "input", handler);

How to Use focus

Bind a handler, optionally pass data, then trigger when you need to move focus.

1. Bind with .on("focus", handler) on the element that should react.
2. Optionally pass eventData: .on("focus", data, handler).
3. Trigger with .trigger("focus") — only on visible elements.
4. Use .triggerHandler("focus") when you want handlers without moving focus.
5. For dynamic forms, prefer delegated focusin on a parent.

Pseudocode

call element.on("focus", handler)
    → store handler on element

when user clicks / tabs into element:
    fire "focus" on element
    call handler(event)

call element.trigger("focus")
    if element is hidden (IE):
        error — do not trigger
    else:
        move keyboard focus
        call bound handlers

call element.triggerHandler("focus")
    → run handlers only (no focus move)

for parent form with many inputs:
    use .on("focusin", "input", handler)
    // focus itself does not bubble

Cheat Sheet

Keep these facts handy while wiring form focus UX.

Live Preview

Click into the field, tab to it, or run an action to see .on("focus") and .trigger("focus") in action.

Ready — click the input or pick an action.

jQuery Examples

Short, copy-ready snippets based on the official jQuery API demos. Open Try It Yourself for a live editor.

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

Click or tab into #target
#out shows "Handler for focus called."

$("#target").on("focus", function () {
  $("#out").text("Target focus handler ran.");
});

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

Click #other → focus moves to #target
Bound handler runs
Same result as clicking the field directly

$("input").on("focus", function () {
  var name = $(this).attr("name");
  $("#out").text("Focused: " + name + " — enter a value.");
});

Focus first field → "Focused: first — enter a value."
Focus second field → "Focused: last — enter a value."

$(function () {
  $("#login").trigger("focus");
  $("#out").text("#login received focus on page load.");
});

Page loads → #login is focused
User can type immediately
Similar idea to HTML autofocus

$("#signup-form").on("focusin", "input", function () {
  $("#out").text("Active field: " + ($(this).attr("name") || "(unnamed)"));
});

Tab into first → "Active field: first"
Tab into last → "Active field: last"
New fields added later still work

Performance Notes

Focus fires often while users tab through a form. Keep callbacks small — toggle a hint, set a class, or update a short label.

Key Takeaways