initial commit

1 files changed, 143 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..ba438793b8
--- /dev/null
+++ b/files/ja/web/api/document/activeelement/index.html
@@ -0,0 +1,143 @@
+---
+title: document.activeElement
+slug: Web/API/Document/activeElement
+tags:
+  - DOM
+  - Focus
+  - Gecko
+  - HTML5
+  - NeedsTranslation
+  - 要更新
+translation_of: 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>
+
+<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>