The activeElement
read-only property of the Document
and ShadowRoot
interfaces returns the Element
within the DOM or shadow DOM tree that currently has focus.
Often activeElement
will return a HTMLInputElement
or HTMLTextAreaElement
object if it has the text selection at the time. If so, you can get more detail by using the object's selectionStart
and selectionEnd
properties. Other times the focused element might be a <select>
element (menu) or an <input>
element, of type
"button"
, "checkbox"
, or "radio"
.
Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate one (that is, to press a button or toggle a radio button). Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.
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()
.
Syntax
element = DocumentOrShadowRoot.activeElement
Value
The Element
which currently has focus, <body>
or null
if there is no focused element.
Example
HTML
<p>Select some text from one of the text areas below:</p>
<form>
<textarea name="ta-example-one" id="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" id="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: <b id="output-element"></b></p>
<p>Selected text: <b id="output-text"></b></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.innerHTML = activeTextarea.id;
outputText.innerHTML = selection;
}
const textarea1 = document.getElementById('ta-example-one');
const textarea2 = document.getElementById('ta-example-two');
textarea1.addEventListener('mouseup', onMouseUp, false);
textarea2.addEventListener('mouseup', onMouseUp, false);
Result
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'activeElement' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 53 |
Edge
Full support 12 |
Firefox
Full support 63 |
IE
Full support 4 |
Opera
Full support 40 |
Safari
Full support 4 |
WebView Android
Full support 53 |
Chrome Android
Full support 53 |
Firefox Android
Full support 63 |
Opera Android
Full support 41 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
DocumentOrShadowRoot.activeElement by Mozilla Contributors is licensed under CC-BY-SA 2.5.