jQuery .focus() Method

What Is .focus()?

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

// Legacy (still works; bind form deprecated since 3.3)
$("#login").focus(function () {
  // field gained focus
});

// Modern replacements
$("#login").on("focus", handler);   // bind
$("#login").trigger("focus");       // fire + move focus

// Auto-focus on load (legacy)
$(function () { $("#login").focus(); });

How to Use .focus()

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

1. Bind with .focus(handler) (legacy) or .on("focus", handler) (preferred).
2. Optionally pass eventData: .focus(data, handler) → .on("focus", data, handler).
3. Trigger with no-arg .focus() (legacy) or .trigger("focus") (preferred).
4. Only trigger on visible elements — hidden targets can error in IE.
5. For parent forms / dynamic fields, use focusin — .focus() has no delegation.

Pseudocode

// Legacy
call element.focus(handler)
    → bind "focus" on element

call element.focus()
    → trigger "focus" on element
    → move keyboard focus (if visible)

// Modern (jQuery 1.7+)
call element.on("focus", handler)
when user clicks / tabs into element:
    fire "focus" on element
    call handler(event)

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

Cheat Sheet

Quick map from the shorthand to modern APIs.

Live Preview

Pick an action against a sample input. The demo uses .focus() (still available in jQuery 3.x) so you can see bind vs trigger.

Ready — click the input or pick an action.

jQuery Examples

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

$("#target").focus(function () {
  $("#out").text("Handler ran via .focus(function(){ ... }).");
});

Click or tab into #target
#out shows the legacy handler message

$(".field").focus({ hint: "Enter your email" }, function (event) {
  var name = $(this).attr("name");
  $("#out").text(name + " | hint: " + event.data.hint);
});

Focus email → "email | hint: Enter your email"
Same eventData shared across every .field

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

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

Click #fire → no-arg .focus() runs
Focus moves to #target
Bound handler updates #out

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

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

Focus #legacy → legacy deprecation message
Focus #modern → modern .on("focus") message
Behavior is the same — API name differs

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

Page loads → #login is focused
User can type immediately
Modern: $("#login").trigger("focus")

Performance Notes

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

Key Takeaways