From ede8167be634194a14f76f6d45485b8891bcdb35 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 30 Jul 2021 13:16:49 +0900 Subject: orphaned/Web/API/HTMLOrForeignElement のメンバーを HTMLElement へ移動 (#1595) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * orphaned/Web/API/HTMLOrForeignElement のメンバーを HTMLElement へ移動 --- files/ja/web/api/htmlelement/focus/index.html | 161 ++++++++++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 files/ja/web/api/htmlelement/focus/index.html (limited to 'files/ja/web/api/htmlelement/focus') 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 +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.focus() メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。 フォーカスされた要素は、デフォルトでキーボードや同様のイベントを受け取る要素です。

+ +

構文

+ +
element.focus(options); // Object parameter
+ +

パラメーター

+ +
+
options {{optional_inline}}
+
フォーカスプロセスの側面を制御するオプションを提供するオプションのオブジェクト。 このオブジェクトには、次のプロパティが含まれる場合があります。
+
+
+
preventScroll {{optional_inline}}
+
ブラウザーがドキュメントをスクロールして、新しくフォーカスされた要素を表示するかどうかを示す Boolean の値。 preventScroll の値が false（デフォルト）の場合、ブラウザーは要素をフォーカスした後、その要素をスクロールして表示します。 preventScroll が true に設定されている場合、スクロールしません。
+
+
+
+ +

例

+ +

テキストフィールドにフォーカスする

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="テキストフィールド">
+<p></p>
+<button type="button" onclick="focusMethod()">クリックしてテキストフィールドにフォーカスしてください！</button>
+
+ +

結果

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

ボタンにフォーカスする

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+
+ +

HTML

+ +
<button type="button" id="myButton">クリックしてください！</button>
+<p></p>
+<button type="button" onclick="focusMethod()">クリックしてボタンにフォーカスしてください！</button>
+
+ +

結果

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ +

focusOption でフォーカスする

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

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>
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

ノート

+ +

mousedown イベントハンドラから HTMLElement.focus() を呼び出す場合は、event.preventDefault() を呼び出して、フォーカスがその HTMLElement から離れないようにする必要があります。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLElement.focus")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf