Revision 685211 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;В других случаях вокусированный элемент может быть {{ HTMLElement("select") }} элементом (меню) или {{ HTMLElement("input") }} элементом, типа button, checkbox or radio.</p>
<div class="note">
 <strong>Note:</strong> On Mac, elements that aren't text input elements tend not to get focus assigned to them.</div>
<p>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).</p>
<p>Do not confuse focus with a selection over the document, consisting mostly of static text nodes.&nbsp; See {{ domxref("window.getSelection()") }} for that.&nbsp;</p>
<p>When there is no selection, the active element is the page's {{ HTMLElement("body") }} or null.&nbsp;</p>
<p>{{ Note("This attribute is part of the in-development HTML 5 specification.") }}</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;
    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>{{ JSFiddleLink("w9gFj") }}</p>
<h2 id="Notes">Notes</h2>
<p>Originally introduced as a proprietary DOM&nbsp;extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).</p>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
 <li><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></li>
</ul>
<h2 id="Browser_compatibility">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</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>&nbsp;</p>