diff options
Diffstat (limited to 'files/pt-br/web/api/document/activeelement/index.html')
| -rw-r--r-- | files/pt-br/web/api/document/activeelement/index.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/files/pt-br/web/api/document/activeelement/index.html b/files/pt-br/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..2223a29d1d --- /dev/null +++ b/files/pt-br/web/api/document/activeelement/index.html @@ -0,0 +1,166 @@ +--- +title: Document.activeElement +slug: Web/API/DocumentOrShadowRoot/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/Document/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"><!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.<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); + } + </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> +</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="Compatibilidade_nos_navegadores">Compatibilidade nos 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> |