diff options
Diffstat (limited to 'files/ja/web/api/document/activeelement')
| -rw-r--r-- | files/ja/web/api/document/activeelement/index.html | 144 |
1 files changed, 0 insertions, 144 deletions
diff --git a/files/ja/web/api/document/activeelement/index.html b/files/ja/web/api/document/activeelement/index.html deleted file mode 100644 index 31c1b2bc7f..0000000000 --- a/files/ja/web/api/document/activeelement/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -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> |