1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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() }}</p>
<h2 id="Summary" name="Summary">Анотация</h2>
<p>Возвращает текущий сфокусированный элемент, то есть элемент, на котором будут вызываться события клавиатуры, если пользователь начнёт с неё ввод. Этот атрибут доступен только для чтения.</p>
<p>Часто возвращается {{ HTMLElement("input") }} или {{ HTMLElement("textarea") }} объект, если он содержит в себе выделенный в данный момент текст. При этом вы можете получить более подробные сведения, используя свойства элемента <code>selectionStart</code> и <code>selectionEnd</code>. В других случаях сфокусированным элементом может быть {{ HTMLElement("select") }} элемент (меню) или {{ HTMLElement("input") }} элемент типа button, checkbox или radio.</p>
<p>{{ Note("На Mac, элементы, не являющиеся текстовыми полями, как правило, не получают фокус.") }}</p>
<p>Как правило, пользователь может нажать клавишу табуляции для перемещения по фокусируемым элементам страницы, и использовать пробел для их активации (нажать кнопку button, выбрать переключатель radio).</p>
<p>Не следует путать фокус с выделением документа, состоящего в основном из статических текстовых узлов. См. {{ domxref("window.getSelection()") }}. </p>
<p>Когда выделение отсутствует, активным элементом является {{ HTMLElement("body") }} страницы или null. </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"><!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>
Выделите текст в одном из текстовых полей ниже:
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
Это текстовое поле 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.
</textarea>
<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
Это текстовое поле 2:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
ID активного элемента: <span id="output-element"></span><br/>
Выделенный текст: <span id="output-text"></span>
</body>
</html>
</pre>
<p><a href="https://jsfiddle.net/w9gFj">Посмотреть на JSFiddle</a></p>
<h2 id="Примечания">Примечания</h2>
<p>Первоначально введенное как собственное расширение DOM в 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> </td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</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]: В IE9 наблюдается баг: при попытке получения доступа к <code>activeElement в </code>{{domxref("window.parent")}} {{domxref("Document")}} из {{HTMLElement("iframe")}} (т.е. <code>parent.document.activeElement</code>) выбрасывается ошибка.</p>
<h2 id="Связанные_события">Связанные события</h2>
<ul>
<li>{{event("focus")}}</li>
<li>{{event("blur")}}</li>
<li>{{event("focusin")}}</li>
<li>{{event("focusout")}}</li>
</ul>
|
