diff options
Diffstat (limited to 'files/ja/web/api/htmlelement/focus/index.html')
| -rw-r--r-- | files/ja/web/api/htmlelement/focus/index.html | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/files/ja/web/api/htmlelement/focus/index.html b/files/ja/web/api/htmlelement/focus/index.html new file mode 100644 index 0000000000..42129a1465 --- /dev/null +++ b/files/ja/web/api/htmlelement/focus/index.html @@ -0,0 +1,161 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - Focus + - HTML DOM + - HTMLElement + - Method + - Reference + - Scroll + - View + - activate +translation_of: Web/API/HTMLElement/focus +original_slug: Web/API/HTMLElement/focus +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><span class="seoSummary"><strong><code>HTMLElement.focus()</code></strong> メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。 フォーカスされた要素は、デフォルトでキーボードや同様のイベントを受け取る要素です。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>element</em>.focus(<em>options</em>); // Object parameter</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>フォーカスプロセスの側面を制御するオプションを提供するオプションのオブジェクト。 このオブジェクトには、次のプロパティが含まれる場合があります。</dd> + <dd> + <dl> + <dt><code>preventScroll</code> {{optional_inline}}</dt> + <dd>ブラウザーがドキュメントをスクロールして、新しくフォーカスされた要素を表示するかどうかを示す <code>Boolean</code> の値。 <code>preventScroll</code> の値が <code>false</code>（デフォルト）の場合、ブラウザーは要素をフォーカスした後、その要素をスクロールして表示します。 <code>preventScroll</code> が <code>true</code> に設定されている場合、スクロールしません。</dd> + </dl> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Focus_on_a_text_field" name="Focus_on_a_text_field">テキストフィールドにフォーカスする</h3> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">focusMethod = function getFocus() { + document.getElementById("myTextField").focus(); +}</pre> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><input type="text" id="myTextField" value="テキストフィールド"> +<p></p> +<button type="button" onclick="focusMethod()">クリックしてテキストフィールドにフォーカスしてください！</button> +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p> + +<h3 id="Focus_on_a_button" name="Focus_on_a_button">ボタンにフォーカスする</h3> + +<h4 id="JavaScript_2" name="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">focusMethod = function getFocus() { + document.getElementById("myButton").focus(); +} +</pre> + +<h4 id="HTML_2" name="HTML_2">HTML</h4> + +<pre class="brush: html"><button type="button" id="myButton">クリックしてください！</button> +<p></p> +<button type="button" onclick="focusMethod()">クリックしてボタンにフォーカスしてください！</button> +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p> + +<h3 id="Focus_prevent_scroll" name="Focus_prevent_scroll">focusOption でフォーカスする</h3> + +<h4 id="JavaScript_3" name="JavaScript_3">JavaScript</h4> + +<pre class="brush: js">focusScrollMethod = function getFocus() { + document.getElementById("myButton").focus({preventScroll:false}); +} +focusNoScrollMethod = function getFocusWithoutScrolling() { + document.getElementById("myButton").focus({preventScroll:true}); +} + +</pre> + +<h4 id="HTML_3" name="HTML_3">HTML</h4> + +<pre class="brush: html"><button type="button" onclick="focusScrollMethod()">クリックしてボタンにフォーカスしてください！</button> +<button type="button" onclick="focusNoScrollMethod()">クリックしてスクロールせずにボタンにフォーカスしてください！</button> + +<div id="container" style="height: 1000px; width: 1000px;"> +<button type="button" id="myButton" style="margin-top: 500px;">クリックしてください！</button> +</div> + +</pre> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Notes" name="Notes">ノート</h2> + +<p><code>mousedown</code> イベントハンドラから <code>HTMLElement.focus()</code> を呼び出す場合は、<code>event.preventDefault()</code> を呼び出して、フォーカスがその <code>HTMLElement</code> から離れないようにする必要があります。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLElement.focus")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>要素からフォーカスを取り除く DOM メソッド {{domxref("HTMLElement.blur()")}}。</li> + <li>現在フォーカスされている要素がどれであるかを知るための {{ domxref("document.activeElement") }}。</li> +</ul> |