Document: activeElement property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

TheactiveElement read-only property of theDocument interface returns theElement within the DOM that is receiving keyboard events such askeydown andkeyup. This is usually analogous to the focused element.

Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on Safari, following the behavior of macOS, elements that aren't text input elements are not focusable by default, unless the "Full Keyboard Access" setting is enabled in System Settings.

Typically a user can press theTab key to move the focus around the page among focusable elements, and use keyboard gestures such asSpace orEnter to simulate clicks on the focused element.

Note:Focus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document). You can get the current selection usingwindow.getSelection().

Value

The deepestElement which currently has focus.

If the focused element is within a shadow tree within the current document (for example, the focused element is inside aniframe, and the invokingdocument contains that iframe), then this will be the root element of that tree (in this example, thatiframe).
If the focused element is within a document tree that's not descended from the current document (for example, the focused element is in the main document, and the invokingdocument is an embedded iframe), then this will benull.
If there's no focused element, this is theDocument.body orDocument.documentElement.

Examples

HTML

html

<p>Select some text from one of the text areas below:</p><form>  <textarea name="ta-example-one" rows="7" cols="40">This is Text Area One. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea  >  <textarea name="ta-example-two" rows="7" cols="40">This is Text Area Two. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea  ></form><p>Active element ID: <em></em></p><p>Selected text: <em></em></p>

JavaScript

function onMouseUp(e) {  const activeTextarea = document.activeElement;  const selection = activeTextarea.value.substring(    activeTextarea.selectionStart,    activeTextarea.selectionEnd,  );  const outputElement = document.getElementById("output-element");  const outputText = document.getElementById("output-text");  outputElement.textContent = activeTextarea.id;  outputText.textContent = selection;}const textarea1 = document.getElementById("ta-example-one");const textarea2 = document.getElementById("ta-example-two");textarea1.addEventListener("mouseup", onMouseUp);textarea2.addEventListener("mouseup", onMouseUp);