Document.activeElement

  • Revision slug: DOM/document.activeElement
  • Revision title: document.activeElement
  • Revision id: 61037
  • Created:
  • Creator: Kennyluck
  • Is current revision? No
  • Comment browser compatibility table, <h3> → <h2>; no changes

Revision Content

{{ DomRef() }}

Summary

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

Often this will return an {{ HTMLElement("input") }} or {{ HTMLElement("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 {{ HTMLElement("select") }} element (menu) or an {{ HTMLElement("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 {{ domxref("window.getSelection()") }} for that. 

When there is no selection, the active element is the page's {{ HTMLElement("body") }}. 

{{ Note("This attribute is part of the in-development HTML 5 specification.") }}

Syntax

var curElement = document.activeElement;

Example

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" 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>

{{ JSFiddleLink("w9gFj") }}

Notes

Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).

Specification

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }} 3.0 4 10 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

{{ languages( { "es": "es/DOM/element.activeElement", "fr": "fr/DOM/document.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h2 name="Summary">Summary</h2>
<p>Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.</p>
<p>Often this will return an {{ HTMLElement("input") }} or {{ HTMLElement("textarea") }} object, if it has the text selection at the time.  If so, you can get more detail by using the element's <code>selectionStart</code> and <code>selectionEnd</code> properties.  Other times the focused element might be a {{ HTMLElement("select") }} element (menu) or an {{ HTMLElement("input") }} element, of <code>type</code> button, checkbox or radio.</p>
<div class="note"><strong>Note:</strong> On Mac, elements that aren't text input elements tend not to get focus assigned to them.</div>
<p>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).</p>
<p>Do not confuse focus with a selection over the document, consisting mostly of static text nodes.  See {{ domxref("window.getSelection()") }} for that. </p>
<p>When there is no selection, the active element is the page's {{ HTMLElement("body") }}. </p>
<p>{{ Note("This attribute is part of the in-development HTML 5 specification.") }}</p>
<h2 name="Syntax">Syntax</h2>
<pre class="eval">var curElement = document.activeElement;
</pre>
<h2 name="Example">Example</h2>
<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" charset="utf-8"&gt;
    function init() {

        function onMouseUp(e) {
            console.log(e);
            var outputElement = document.getElementById('output-element');
            var outputText = document.getElementById('output-text');
            var selectedTextArea = document.<strong>activeElement</strong>;
            var selection = selectedTextArea.value.substring(
            selectedTextArea.<strong>selectionStart</strong>, selectedTextArea.<strong>selectionEnd</strong>);
            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);
    }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body onload="init()"&gt;
&lt;div&gt;
    Select some text from one of the Textareas below:
&lt;/div&gt;
&lt;form id="frm-example" action="#" accept-charset="utf-8"&gt;
&lt;textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40"&gt;
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.
&lt;/textarea&gt;
&lt;textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40"&gt;
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.
&lt;/textarea&gt;
&lt;/form&gt;
Active Element Id: &lt;span id="output-element"&gt;&lt;/span&gt;&lt;br/&gt;
Selected Text: &lt;span id="output-text"&gt;&lt;/span&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>{{ JSFiddleLink("w9gFj") }}</p>
<h2>Notes</h2>
<p>Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).</p>
<h2 name="Specification">Specification</h2>
<ul> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></li>
</ul>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}</td> <td>3.0</td> <td>4</td> <td>10</td> <td>4.0</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<p>{{ languages( { "es": "es/DOM/element.activeElement", "fr": "fr/DOM/document.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}</p>
Revert to this revision