Document.activeElement

  • Revision slug: DOM/document.activeElement
  • Revision title: document.activeElement
  • Revision id: 61033
  • Created:
  • Creator: timemachine3030
  • Is current revision? No
  • Comment Link to jsfiddle; 13 words added

Revision Content

{{ DomRef() }}

Summary

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

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, type = button, checkbox or radio.  MacOS tends to not have focus on an Input that isn't a text-type input. 

Typically a user can type Tab to move the focus around the page among focusable elements, and use Space to actuate it (press a button, choose a radio).

Do not confuse 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 BODY tag. 

{{ 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>

View this example! (http://jsfiddle.net/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

Focus management

{{ 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>
<h3 name="Summary">Summary</h3>
<p>Returns the currently focused element, that is, the element that will get keystroke events if the user types any. Attribute is read only.</p>
<p>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, type = button, checkbox or radio.  MacOS tends to not have focus on an Input that isn't a text-type input. </p>
<p>Typically a user can type Tab to move the focus around the page among focusable elements, and use Space to actuate it (press a button, choose a radio).</p>
<p>Do not confuse with a selection over the document, consisting mostly of static text nodes.  See window.getSelection() for that. </p>
<p>When there is 'no selection', the active element is the BODY tag. </p>
<p>{{ Note("This attribute is part of the in-development HTML 5 specification.") }}</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">var curElement = document.activeElement;
</pre>
<h3 name="Example">Example</h3>
<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><a class=" external" href="http://jsfiddle.net/w9gFj/" title="http://jsfiddle.net/w9gFj/">View this example! (http://jsfiddle.net/w9gFj/)</a></p>
<h3>Notes</h3>
<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>
<h3 name="Specification">Specification</h3>
<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></p>
<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