jQuery .focus() Method

What You’ll Learn

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

Introduction

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

Understanding .focus() matters when reading older login-form and helper-text tutorials in legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("focus", handler) for binding and .trigger("focus") for firing.

Understanding the .focus() Method

The official jQuery API describes .focus() as a way to bind an event handler to the focus 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 user clicks in, tabs to the field, or focus moves programmatically — the same focus event that .on("focus") handles today.

When you call .focus() with no arguments, jQuery synthetically fires the focus event on each matched element. Bound handlers run and keyboard focus moves to the field — useful for auto-focusing the login input on page load. This trigger behavior is equivalent to .trigger("focus").

📝 Syntax

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

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

.focus( handler )

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

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

.focus( [eventData], handler )

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

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

.focus()

• No arguments — triggers focus on every matched element.
• Runs bound focus handlers.
• Preferred replacement: .trigger( "focus" ).

Official jQuery API migration note

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

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

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

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

Return value

• All .focus() 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 .focus() to .on("focus"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .focus(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

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

User clicks or tabs into #target
→ handler runs, #out text updates

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

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

Focus into empty email field → "email | hint: Enter your email | empty: true"

Focus into filled name field → "name | hint: Enter your email | empty: false"

Same handler, shared eventData on every .field input

var count = 0;

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

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

Click or tab into from #target → count increments

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

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

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

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

Focus into #legacy → legacy deprecation message

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

Behavior is identical — only the API name differs

$( "#login" )
  .focus( function() {
    $( "#hint" ).text( "Helper: enter your username." ).show();
  } )
  .focus( function() {
    $( this ).toggleClass( "active", true );
  } );

User clicks or tabs into #login

First handler shows #hint text

Second handler adds .active class

Both handlers run in bind order on each focus

🚀 Common Use Cases

• Reading legacy code — recognize $("#login").focus(fn) as equivalent to .on("focus", fn) in older form scripts.
• Show helper text — legacy tutorials bind .focus() to reveal hints when the user enters a field.
• Auto-focus on page load — $("#login").focus() after the DOM is ready — replace with .trigger("focus").
• Shared eventData — $(".field").focus({ hint: "email format" }, fn) passes validation metadata without closures.
• Show hint on entry — chained .focus(fn) calls show helper text and mark fields as active.
• Maintaining WordPress themes — many admin and front-end scripts still use .focus() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .focus(handler) or .focus(eventData, handler) in new code. Use .on("focus") instead.
• Bind with .focus(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .focus() triggers the event since jQuery 1.0 — prefer .trigger("focus").
• .focus() does not support event delegation — use .on("focus", selector, fn) or .on("focusin", selector, fn) for dynamic forms.
• Native focus does not bubble — parent-level handlers need focusin, not direct .focus(fn) on the form.
• Remove handlers with .off("focus") — not by calling .focus(undefined).
• For the full modern focus event guide — delegation, focusin, and auto-focus patterns — see the jQuery focus event tutorial.

💡 Best Practices