Document: activeElement property - Web A

Document: activeElement property - Web APIs | MDN
Skip to search
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.
See full compatibility
Report feedback
The
activeElement
read-only property of the
Document
interface returns the
Element
within the DOM that is receiving keyboard events such as
keydown
and
keyup
. 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 the
Tab
key to move the focus around the page among focusable elements, and use keyboard gestures such as
Space
or
Enter
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 using
window.getSelection()
Value
The deepest
Element
which currently has focus.
If the focused element is within a shadow tree within the current document (for example, the focused element is inside an
iframe
, and the invoking
document
contains that iframe), then this will be the root element of that tree (in this example, that
iframe
).
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 invoking
document
is an embedded iframe), then this will be
null
If there's no focused element, this is the
Document.body
or
Document.documentElement
Examples
HTML
html

Select some text from one of the text areas below:

<br>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<br><textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40"><br>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<br></form></p>
<p><p>Active element ID: <em id="output-element"></em></p><br><p>Selected text: <em id="output-text"></em></p><br>JavaScript<br>js<br>function onMouseUp(e) {<br>const activeTextarea = document.activeElement;<br>const selection = activeTextarea.value.substring(<br>activeTextarea.selectionStart,<br>activeTextarea.selectionEnd,<br>);</p>
<p>const outputElement = document.getElementById("output-element");<br>const outputText = document.getElementById("output-text");<br>outputElement.textContent = activeTextarea.id;<br>outputText.textContent = selection;</p>
<p>const textarea1 = document.getElementById("ta-example-one");<br>const textarea2 = document.getElementById("ta-example-two");<br>textarea1.addEventListener("mouseup", onMouseUp);<br>textarea2.addEventListener("mouseup", onMouseUp);<br>Result<br>Specifications<br>Specification<br>HTML<br># dom-documentorshadowroot-activeelement-dev<br>Browser compatibility<br>See also<br>Document.hasFocus<br>Help improve MDN<br>Learn how to contribute<br>This page was last modified on<br>Oct 14, 2025<br>by<br>MDN contributors<br>View this page on GitHub<br>Report a problem with this content</p></div>
    
  </div>

<div class="detail-actions">
    <a href="/search?q=developer.mozilla.org" class="btn">Same domain →</a>
    <a href="/search?q=Document%3A%20activeElement%20proper" class="btn btn-secondary">Similar titles →</a>
  </div>
</article>

</main>

<footer class="site-footer">
    <div class="container">
      <p>C U Cyber History — Public Interest Web Archive</p>
      <p class="footer-small">Preserving fading web memories. Discover history that once existed.</p>
    </div>
  </footer>