JavaScript Document activeElement Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ACTIVEELEMENT

Definition

Document.activeElement is a read-only property that returns the deepest Element currently receiving keyboard events (such as keydown / keyup). That is usually the focused control (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.activeElement. Start with this line.

JavaScript
document.activeElement
CallWhat it does
document.activeElementPrimary signature.

Built into the browser. Read or assign document.activeElement — no import required.

Library declarations
JavaScript
document.activeElement

Parameters

ParameterDescription
focus() / TabOptional. How focus arrives on an element

Return Value

Return ValueDescription
*Focused Element (deepest in this document)

JavaScript Examples

Example 1 — Read the Focused Element

On focus, log tagName and id of activeElement.

JavaScript
const input = document.getElementById("search");

input.addEventListener("focus", function () {
  const active = document.activeElement;
  console.log(active.tagName);  // "INPUT"
  console.log(active.id);       // "search"
});
Try It Yourself

How It Works

  1. Find the control. getElementById("search") grabs the input.
  2. Wait for focus. The focus listener runs when the field becomes active.
  3. Read activeElement. It should be that same input.
  4. Inspect it. tagName and id identify which node has keyboard focus.

Example 2 — MDN Textarea Selection Demo

On mouseup, show the active textarea id and the selected substring (MDN idea).

JavaScript
function onMouseUp() {
  const active = document.activeElement;
  const selection = active.value.substring(
    active.selectionStart,
    active.selectionEnd
  );
  console.log(active.id);
  console.log(selection);
}

document.getElementById("ta-one").addEventListener("mouseup", onMouseUp);
document.getElementById("ta-two").addEventListener("mouseup", onMouseUp);
Try It Yourself

How It Works

  1. Select text. Drag inside a textarea so it has both focus and a selection.
  2. Read focus. activeElement is that textarea.
  3. Slice the value. selectionStart / selectionEnd mark the highlighted range.
  4. Two ideas together. Focus names the control; selection indexes name the text.

Example 3 — Programmatic focus()

Call focus(), then confirm with activeElement.

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

email.focus();
console.log(document.activeElement === email);  // true
console.log(document.activeElement.id);         // "email"
Try It Yourself

How It Works

  1. Get the target. Locate the email input by id.
  2. Move focus. email.focus() makes it the keyboard target.
  3. Verify with ===. activeElement should be the same object.
  4. Do not assign. Writing to document.activeElement is not how you focus.
Compatibility

Browser Support

Document.activeElement is Baseline Widely available (MDN: since July 2015). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

Document.activeElement

Read-only focused Element — supported across modern browsers for years.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
activeElement Excellent

Bottom line: Safe for production. Pair with hasFocus() when you need to know if the document itself is focused, and remember focus rules can differ slightly by platform.

Frequently Asked Questions

A read-only Document property that returns the deepest Element currently receiving keyboard events (keydown, keyup, and similar). That is usually the focused element.
No. MDN marks Document.activeElement as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
When no element has focus, activeElement is usually document.body or document.documentElement — depending on the browser and page.
No. Focus is which element receives keyboard input. Selection is the highlighted text range. Use window.getSelection() (or document.getSelection()) for selection; use activeElement for focus.
No. It is read-only. To move focus, call element.focus() on the target you want active.
If focus is in another document (for example the main page while your script runs inside an iframe), activeElement from that iframe document may be null. If focus is inside a shadow tree hosted in your document, you may get the shadow host (such as an iframe) instead of the inner node.

Next: activeViewTransition

Learn the Document property for the current view transition.

activeViewTransition tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document Constructor JavaScript Document activeViewTransition Property