Document.activeElement

Esta tradução está incompleta. Ajude atraduzir este artigo.

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.

Note: No Mac, elementos que nao sejam campos de texto geralmente não recebem foco.

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. 

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 on JSFiddle

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.

Etiquetas do documento e colaboradores

 Colaboradores desta página: DiegoYungh
 Última atualização por: DiegoYungh,