diff options
Diffstat (limited to 'files/ja/web/api/document/activeelement/index.html')
| -rw-r--r-- | files/ja/web/api/document/activeelement/index.html | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/files/ja/web/api/document/activeelement/index.html b/files/ja/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..5fe59cbae6 --- /dev/null +++ b/files/ja/web/api/document/activeelement/index.html @@ -0,0 +1,145 @@ +--- +title: document.activeElement +slug: Web/API/DocumentOrShadowRoot/activeElement +tags: + - DOM + - Focus + - Gecko + - HTML5 + - NeedsTranslation + - 要更新 +translation_of: Web/API/DocumentOrShadowRoot/activeElement +translation_of_original: Web/API/Document/activeElement +original_slug: 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> |