--- title: HTMLElement.focus() slug: Web/API/HTMLOrForeignElement/focus tags: - API - Focus - HTML DOM - HTMLElement - Method - Reference - Scroll - View - activate translation_of: Web/API/HTMLOrForeignElement/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")}}

関連情報