We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE


This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The activeElement read-only property of the DocumentOrShadowRoot interface returns the element within the DOM or shadow tree that has focus.

Often this 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.

Note: On Mac, elements that aren't text input elements tend not to get focus assigned to them.

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 it (press a button, choose a radio).

Do not confuse focus with a selection over the document, consisting mostly of static text nodes.  See window.getSelection() for that. 

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


var element = DocumentOrShadowRoot.activeElement


An Element or null if there is no selection.


    <script type="text/javascript" charset="utf-8">
    function init() {

        function onMouseUp(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);
<body onload="init()">
    Select some text from one of the Textareas below:
<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 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.
Active Element Id: <span id="output-element"></span><br/>
Selected Text: <span id="output-text"></span>


View on JSFiddle


Specification Status Comment
Shadow DOM
The definition of 'DocumentOrShadowRoot' in that specification.
Working Draft Initial definition.

Browser Compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support53 Yes Yes Yes40 Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5353 Yes Yes40 Yes ?

Document Tags and Contributors

 Contributors to this page: fscholz, chrisdavidmills, bede, bunnybooboo, jpmedley
 Last updated by: fscholz,