Revision 1039218 of Document.activeElement

<p>{{ ApiRef() }}</p>

<h2 id="Summary" name="Summary">Анотация</h2>

<p>Возвращает текущий сфокусированный элемент, то есть элемент, на котором будут вызываться события клавиатуры, если пользователь начнёт с неё ввод. Этот атрибут доступен только для чтения.</p>

<p>Часто возвращается {{ HTMLElement("input") }} или {{ HTMLElement("textarea") }} объект, если он содержит в себе выделенный в данный момент текст. При этом вы можете получить более подробные сведения, используя свойства элемента &nbsp;<code>selectionStart</code> и <code>selectionEnd</code>. &nbsp;В других случаях сфокусированным&nbsp;элементом может быть {{ HTMLElement("select") }} элемент&nbsp;(меню) или {{ HTMLElement("input") }} элемент&nbsp;типа button, checkbox или radio.</p>

<p>{{ Note("На Mac, элементы, не являющиеся текстовыми полями, как правило, не получают фокус.") }}</p>

<p>Как правило, пользователь может нажать клавишу табуляции для перемещения по фокусируемым элементам страницы, и использовать пробел для их активации&nbsp;(нажать кнопку button, выбрать переключатель&nbsp;radio).</p>

<p>Не следует путать фокус с выделением документа,&nbsp;состоящего в основном из статических текстовых узлов.&nbsp;См.&nbsp;{{ domxref("window.getSelection()") }}.&nbsp;</p>

<p>Когда выделение отсутствует, активным элементом является&nbsp;{{ HTMLElement("body") }} страницы или null.&nbsp;</p>

<p>{{ Note("Этот атрибут является частью разрабатываемой спецификации HTML 5.") }}</p>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

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

<h2 id="Example" name="Example">Пример</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;
    Выделите текст в одном из текстовых полей ниже:
&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;
Это текстовое поле 1: 
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;
Это текстовое поле 2:
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;
ID активного элемента: &lt;span id="output-element"&gt;&lt;/span&gt;&lt;br/&gt;
Выделенный текст: &lt;span id="output-text"&gt;&lt;/span&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>{{ JSFiddleLink("w9gFj") }}</p>

<h2 id="Notes">Примечания</h2>

<p>Первоначально введенное как собственное расширение&nbsp;DOM&nbsp;в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).</p>

<h2 id="Specification" name="Specification">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Совместимость с браузерами</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&nbsp;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]: В IE9 наблюдается баг: при попытке получения доступа к&nbsp;<code>activeElement в&nbsp;</code>{{domxref("window.parent")}} {{domxref("Document")}}&nbsp;из&nbsp;{{HTMLElement("iframe")}}&nbsp;(т.е. <code>parent.document.activeElement</code>) выбрасывается ошибка.</p>

<h2 id="Related_events">Связанные события</h2>

<p>{{FocusRelatedEvents()}}</p>