DocumentOrShadowRoot.activeElement

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. This property is inherited from the DocumentOrShadowRoot mixin.

Often activeElement will return an <input> or <textarea> object if it has the text selection at the time. If so, you can get more detail by using the element'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().

When there is no selection, the active element is the page's <body> or null.

Syntax

var element = DocumentOrShadowRoot.activeElement

Value

The Element which currently has focus, <body> or null if there is no focused element.

Examples

<!DOCTYPE HTML>
<html>
<head>
    <script charset="utf-8">
    function init() {

        function onMouseUp(e) {
            console.log(e);
            var outputElement = document.getElementById('output-element');
            var outputText = document.getElementById('output-text');
            var selectedTextArea = document.activeElement;
            var selection = selectedTextArea.value.substring(
            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
            outputElement.innerHTML = selectedTextArea.id;
            outputText.innerHTML = selection;
        }

        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
    }
    </script>
</head>
<body onload="init()">
<div>
    Select some text from one of the Textareas below:
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
This is Textarea Example 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="8" cols="40">
This is Textarea Example Two:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
Active Element Id: <span id="output-element"></span><br>
Selected Text: <span id="output-text"></span>

</body>
</html>

Result

Specifications

Specification	Status	Comment
HTML Living Standard The definition of 'activeElement' in that specification.	Living Standard
Shadow DOM The definition of 'DocumentOrShadowRoot' in that specification.	Obsolete	Extension to add activeElement to ShadowRoot

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support Experimental	Chrome Full support 53	Edge Full support Yes	Firefox Full support Yes	IE Full support Yes	Opera Full support 40	Safari Full support Yes	WebView Android Full support 53	Chrome Android Full support 53	Edge Mobile Full support Yes	Firefox Android Full support Yes	Opera Android Full support 40	Safari iOS Full support Yes	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.