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
|
---
title: document.activeElement
slug: Web/API/Document/activeElement
tags:
- DOM
- Focus
- Gecko
- HTML5
- NeedsTranslation
- 要更新
translation_of: Web/API/DocumentOrShadowRoot/activeElement
translation_of_original: Web/API/Document/activeElement
---
<div>{{ApiRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p>Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.</p>
<p>Often this will return an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} object, if it has the text selection at the time. If so, you can get more detail by using the element's <code>selectionStart</code> and <code>selectionEnd</code> properties. Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of <code>type</code> button, checkbox or radio.</p>
<div class="note"><strong>注記:</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. See {{domxref("window.getSelection()")}} for that.</p>
<p>When there is no selection, the active element is the page's {{HTMLElement("body")}}.</p>
<p>{{Note("This attribute is part of the in-development HTML 5 specification.")}}</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre>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>
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">JSFiddle で確認</a></p>
<h2 id="Notes" name="Notes">注記</h2>
<p>Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).</p>
<h2 id="Specification" name="Specification">仕様</h2>
<ul>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></li>
</ul>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>基本サポート</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>機能</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基本サポート</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
