jQuery :focus Selector

What You’ll Learn

The :focus selector matches elements that currently have focus — the field being typed in, the button tabbed to, or the link activated. Standard CSS since jQuery 1.6; prefix with an element type for clarity.

Introduction

Focus indicates which element is currently receiving keyboard input or pointer interaction. Highlighting the active field improves usability and accessibility. The CSS :focus pseudo-class — and jQuery’s matching selector — lets you style or query that live state in JavaScript.

jQuery supports :focus since version 1.6. Official documentation recommends prefixing it with a tag name or other selector; otherwise the universal selector is implied — $(":focus") searches like $("*:focus"). When you only need the one focused node, $(document.activeElement) is often faster.

Understanding the :focus Selector

Think of :focus as “is this element focused right now?”:

• $("input:focus") → the input the user is currently editing (usually one).
• Focus moves when the user tabs, clicks elsewhere, or scripts call .focus().
• Only one element typically has focus at a time in a document.
• Works in stylesheets and jQuery — e.g. a:focus { outline: 2px solid blue; }.

📝 Syntax

Official jQuery API form (since 1.6):

jQuery( ":focus" )

// typical usage — prefix with element:
$( "input:focus" )
$( "button:focus" )
$( "#contact-form :focus" )

// get current focus without scanning DOM:
$( document.activeElement )

Parameters

• No arguments — matches elements that currently have focus among the preceding selector’s results.

Return value

• A jQuery object containing zero or one focused element (typically one in the document).
• Empty collection when nothing in scope has focus.

Official jQuery API example

$( "#content" ).delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});

Examples Gallery

Example 1 follows the official jQuery delegate focus/blur demo. Examples 2–5 style focused inputs, use document.activeElement, scope to a form, and combine focusable types.

$( "#content" ).delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});

Tab or click into input, select, textarea, or button → .focused (blue bg)
Move focus away → class removed
setTimeout ensures :focus state is accurate after blur

$( "input" ).on( "focus blur", function() {
  $( "input:focus" ).css({
    borderColor: "#2563eb",
    boxShadow: "0 0 0 3px rgba(37, 99, 235, 0.25)"
  });
  $( "input" ).not( ":focus" ).css({
    borderColor: "#cbd5e1",
    boxShadow: "none"
  });
});

Focused input → blue border + glow
Other inputs → default gray border

$( document ).on( "focusin", function() {
  var $focused = $( document.activeElement );
  console.log( "Focused:", $focused.prop( "tagName" ), $focused.attr( "id" ) || $focused.attr( "name" ) );
});

Focused: INPUT email
Focused: TEXTAREA message
(No full DOM scan — direct reference)

$( "#contact-form" ).on( "focusin focusout", function() {
  var $inside = $( "#contact-form :focus" );
  $( "#status" ).text(
    $inside.length ? "Editing: " + ( $inside.attr( "name" ) || "field" ) : "No field focused in form"
  );
});

Focus name field → "Editing: name"
Focus email field → "Editing: email"
Focus outside form → "No field focused in form"

var focusable = "input:focus, textarea:focus, select:focus, button:focus";

$( document ).on( "focusin", function() {
  $( focusable ).addClass( "is-active" );
  $( "input, textarea, select, button" ).not( ":focus" ).removeClass( "is-active" );
});

Tab through input, select, textarea, button → .is-active on focused control only
Matches standard form focusable elements

🚀 Common Use Cases

• Form UX — highlight input:focus for clearer field editing.
• Keyboard nav — style button:focus and a:focus for accessibility.
• Validation hints — show errors only on #form input:focus or after blur.
• Focus tracking — official delegate pattern with elem.is(":focus").
• Modal traps — detect when focus leaves a dialog via scoped :focus queries.
• CSS parity — reuse :focus rules in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.6 — standard CSS pseudo-class.
• Prefix with an element type — bare $(":focus") implies *:focus.
• For the single global focus target, prefer $(document.activeElement).
• Focus state changes on tab, click, and programmatic .focus() / .blur().
• Works in native querySelectorAll("input:focus") in modern browsers.
• Not the same as :focus-visible or :focus-within — different CSS pseudo-classes for other patterns.

💡 Best Practices