Tradução em progresso.
Retorna o elemento atualmente em foco, ou seja, o element que receberá os eventos do teclado caso o usuário digite algo. Esse attribute é somente-leitura.
Geralmente retorna um <input>
ou <textarea>
, caso esteja com uma seleção de texto ativa. Caso esteja, pode obter mais informações sobre a seleção utilizando as propriedades selectionStart
e selectionEnd
. Caso o elemento em foco seja um <select>
(menu) ou <input>
do tipo button, checkbox ou 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 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.
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>
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
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'activeElement' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 2 | 3.0 | 4 [1] | 9.6 | 4.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
[1]: IE9 suffers from a bug where trying to access the activeElement
of an <iframe>
's window.parent
Document
(i.e. parent.document.activeElement
) will throw an error.