files/ja/web/api/document/activeelement/index.html


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

---
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
original_slug: Web/API/DocumentOrShadowRoot/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">&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><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>

<p>{{Compat("api.Document.activeElement")}}</p>