JavaScript Document activeElement Property

What You’ll Learn

The activeElement property is a read-only reference to the element in your document that is receiving keyboard events—usually the focused field or button. Learn how it differs from text selection, what MDN’s textarea demo shows, iframe and shadow-DOM edge cases, and five hands-on examples with try-it labs.

Introduction

When a user tabs into a search box or clicks a button, that element becomes the active (focused) element. Keyboard shortcuts, typing, and Space/Enter activation go to whatever has focus.

document.activeElement tells you which element that is right now. It is one of the most practical Document properties for forms, modals, keyboard shortcuts, and accessibility tooling.

This page is part of the Document tutorials. Related topics include Event.target, ownerDocument, and focusin event.

Understanding Document.activeElement

A read-only instance property on the Document interface. It returns the deepest Element that currently has focus within this document.

• Value — an Element (or occasionally document.body / document.documentElement when nothing else is focused).
• Keyboard events — keydown/keyup are dispatched to the active element.
• Tab navigation — pressing Tab moves focus among focusable controls; activeElement updates automatically.
• Platform differences — on Safari/macOS, non-text controls may not be focusable until “Full Keyboard Access” is enabled in System Settings.
• Cross-document focus — if focus is outside this document tree, the property may be null or point at a host such as an <iframe>.

📝 Syntax

document.activeElement

Value

The deepest focused Element. If no element has focus, browsers typically fall back to document.body or document.documentElement.

Typical patterns

// Read who has focus
const el = document.activeElement;
console.log(el.tagName, el.id);

// Move focus programmatically
document.getElementById("email").focus();
console.log(document.activeElement.id); // "email"

// Guard before acting on keyboard shortcuts
if (document.activeElement.matches("input, textarea")) {
  return; // do not steal keys while typing
}

⚖️ activeElement vs Related Ideas

Examples Gallery

Examples follow MDN Document: activeElement. Use View Output or Try It Yourself for each case.

const input = document.getElementById("search");
input.addEventListener("focus", () => {
  const active = document.activeElement;
  console.log(active.tagName); // "INPUT"
  console.log(active.id);      // "search"
});

INPUT
search

function onMouseUp() {
  const activeTextarea = document.activeElement;
  const selection = activeTextarea.value.substring(
    activeTextarea.selectionStart,
    activeTextarea.selectionEnd
  );

  outputElement.textContent = activeTextarea.id;
  outputText.textContent = selection;
}

textarea1.addEventListener("mouseup", onMouseUp);
textarea2.addEventListener("mouseup", onMouseUp);

Active element ID: ta-example-two
Selected text: Fusce ullamcorper

document.addEventListener("focusin", () => {
  const active = document.activeElement;
  status.textContent =
    "Focused: " + active.tagName.toLowerCase() +
    (active.id ? "#" + active.id : "");
});

Focused: input#name
Focused: input#email
Focused: button#save

const active = document.activeElement;

console.log(active.tagName); // often "BODY" or "HTML"
console.log(active === document.body);
console.log(active === document.documentElement);

BODY
true
false

const email = document.getElementById("email");

openFormBtn.addEventListener("click", () => {
  email.focus();
  console.log(document.activeElement === email); // true
  console.log(document.activeElement.id);        // "email"
});

true
email

🚀 Common Use Cases

• Form UX — auto-focus the first invalid field after validation fails.
• Modals — trap focus inside a dialog and restore focus on close.
• Keyboard shortcuts — skip global handlers when the user is typing in an input.
• Rich text / textarea tools — apply formatting to the focused field (MDN pattern).
• Accessibility audits — log which control receives Tab order.
• SPA routing — move focus to main content after navigation for screen readers.

🔧 How Focus Tracking Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Read-only — use element.focus() to change focus.
• Focus ≠ selection — pair with getSelection() when you need highlighted text.
• Shadow DOM / iframe trees may return a host element or null across document boundaries.
• Safari on macOS may limit focus on non-text elements unless Full Keyboard Access is on.
• Also exists on ShadowRoot.activeElement for shadow trees.

💡 Best Practices