jQuery :focus Selector — Match the Focused Element

What Is the :focus Selector?

:focus (since jQuery 1.6) selects the element that currently has focus — for example the input you are typing in. Like other : pseudo-classes, precede it with a tag or other selector when possible.

$("input:focus");                 // focused input
$("#form :focus");                 // focused control inside a form
$("input").is(":focus");           // true if that input has focus

// Prefer for a single lookup:
$(document.activeElement);

// Bare $(":focus") ≡ $("*:focus") — avoid

How to Use :focus

Query on demand, or listen for focus/blur and test with .is(":focus").

1. Prefer a tagged or scoped selector ($("input:focus"), $("#form :focus")).
2. For a one-off “what has focus?”, use $(document.activeElement).
3. To style live focus, listen for focus/blur (or focusin/focusout).
4. After focus moves, a setTimeout(…, 0) can let .is(":focus") see the new state.
5. Only focusable elements match — inputs, buttons, links, tabindex, and similar.

Pseudocode

call $(context).find(":focus")   // or $("input:focus")

for each candidate element in the query:
    if element is the document's focused node:
        include it

return the jQuery set

// Fast path (no DOM scan):
//   $(document.activeElement)

Cheat Sheet

Keep these facts handy while working with keyboard focus.

Live Preview

Tab or click the fields. The status line shows $("#preview-form :focus").

Ready — focus a field, then click Check.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

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

Focus a field → .focused class added
Leave the field → class removed
setTimeout(0) waits for activeElement to update

$("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
Other inputs → default border

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

Focus email → Focused: INPUT email
Focus message → Focused: TEXTAREA message

$("#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 → Editing: name
Leave 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");
});

Focus any control → gets .is-active
Others lose the class

Edge Cases & Pitfalls

Performance Notes

Focus queries are usually tiny (0–1 matches). Cost comes from scanning too broadly — scope the selector, or skip the selector and read document.activeElement.

Key Takeaways