---
title: Document.activeElement
slug: Web/API/Document/activeElement
tags:
  - API
  - Document
  - HTML DOM
  - Property
  - Reference
translation_of: Web/API/DocumentOrShadowRoot/activeElement
translation_of_original: Web/API/Document/activeElement
original_slug: Web/API/DocumentOrShadowRoot/activeElement
---
<p>{{APIRef("DOM")}}</p>

<p>Retorna o {{ domxref("Element", "elemento") }} atualmente em foco, ou seja, o elemento que receberá os eventos do teclado caso o usuário digite algo. Esse atributo é somente-leitura.</p>

<p>Geralmente retorna um {{ HTMLElement("input") }} ou {{ HTMLElement("textarea") }}, caso esteja com uma seleção de texto ativa. Caso esteja, pode obter mais informações sobre a seleção utilizando as propriedades <code>selectionStart</code> e <code>selectionEnd</code>. Caso o elemento em foco seja um {{ HTMLElement("select") }}(menu) ou {{ HTMLElement("input") }} do tipo <code>button</code>, <code>checkbox</code> ou <code>radio</code>.</p>

<div class="note"><strong>Note:</strong> No Mac, elementos que nao sejam campos de texto geralmente não recebem foco.</div>

<p>Normalmente o usuário pode navegar entre os elementos que pode receber foco na página com o uso da tecla <code>tab</code> e ativar estes elementos com a tecla <code>espaço</code> (apertar um botão ou selecionar uma opção).</p>

<p>Não confunda foco com uma seleção de texto no documento, que consiste em sua maioria de nódos de texto estáticos. Veja {{ domxref("window.getSelection()") }}.</p>

<p>Quando não há nada selecionado, o <code>activeElement</code> da página é o {{ HTMLElement("body") }} ou <code>null</code>. </p>

<div class="note">
<p>Este atributo é parte da seção "Em desenvolvimento" da especificação do HTML 5.</p>
</div>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="eval">var curElement = document.activeElement;
</pre>

<h2 id="Example" name="Example">Exemplo</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><a href="https://jsfiddle.net/w9gFj">View on JSFiddle</a></p>

<h2 id="Notas">Notas</h2>

<p>Originalmente apresentada como extensão DOM proprietária no Internet Explorer 4, esta propriedade também é suportada no Opera e Safari (versão 4 ou maior)</p>

<h2 id="Specification" name="Specification">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</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>2</td>
   <td>3.0</td>
   <td>4 [1]</td>
   <td>9.6</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>[1]: O IE9 tem um bug que ao tentar acessar o activeElement do {{domxref("window.parent")}} {{domxref("Document")}} de um {{HTMLElement("iframe")}}(i.e. <code>parent.document.activeElement</code>) é lançado um erro</p>

<h2 id="Eventos_relacionados">Eventos relacionados</h2>

<ul>
 <li>{{event("focus")}}</li>
 <li>{{event("blur")}}</li>
 <li>{{event("focusin")}}</li>
 <li>{{event("focusout")}}</li>
</ul>