HTMLElement: focus() メソッド

options 省略可

フォーカス処理の制御の側面のためのオプションのオブジェクト。 このオブジェクトには、次のプロパティが含まれる場合があります。

preventScroll 省略可

論理値で、ブラウザーが文書をスクロールして、新しくフォーカスされた要素を表示するかどうかを示します。preventScroll の値が false（既定値）の場合、ブラウザーは要素をフォーカスした後、その要素をスクロールして表示します。preventScroll が true に設定されている場合、スクロールしません。

focusVisible 省略可 Experimental

論理値です。true に設定すると、要素にフォーカスが当たっていることを強制的に可視的に示すことができ、false に設定すると、それを防ぐことができます。 このプロパティが指定されていない場合は、ブラウザーがユーザーにとってのアクセシビリティを向上させると判断した場合は、可視表示を提供することがあります。

なし (undefined)。

この例は、ボタンを使用してテキストフィールドにフォーカスを設定します。

HTML

<input id="myTextField" value="テキストフィールド" />
<button id="focusButton">クリックでテキストフィールドにフォーカスを設定</button>

JavaScript

次のコードは、ボタンが押されたときにテキストフィールドにフォーカスを設定するイベントハンドラーを追加しています。 ほとんどのブラウザーは、フォーカスされたテキストフィールドに自動的に可視表示（「フォーカスリング」）を追加するので、このコードでは focusVisible を true に設定していないことに注意してください。

document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myTextField").focus();
});

結果

ボタンを選択すると、テキストフィールドにフォーカスを設定します。

HTML

まず、3 つのボタンを定義します。 中と右のボタンは、どちらも一番左のボタンにフォーカスを設定します。 一番右のボタンは focusVisible を指定します。

<button id="myButton">クリックしてください</button>
<button id="focusButton">クリックで 「ボタン」にフォーカスを設定</button>
<button id="focusButtonVisibleIndication">
  クリックで「Button」にフォーカスと focusVisible を設定
</button>

JavaScript

下記コードでは、中ボタンと右ボタンのクリックイベントのハンドラーを設定しています。

document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myButton").focus();
});

document
  .getElementById("focusButtonVisibleIndication")
  .addEventListener("click", () => {
    document.getElementById("myButton").focus({ focusVisible: true });
  });

結果

一番左のボタンにフォーカスを設定するには、中央のボタンか一番右のボタンのいずれかを選択します。

ブラウザーは通常、プログラムでフォーカスを設定する際にボタン要素に目に見えるフォーカスの表示をしないので、真ん中のボタンを選択した場合の効果は明らかではないかもしれません。 しかし、focusVisible オプションがブラウザーで対応していれば、正しいボタンが選択されたときに、左端のボタンにフォーカスが変わるのが見えるはずです。

この例では、オプション preventScroll に true と false（既定値）を設定してフォーカスを設定した場合の効果を示しています。

HTML

HTML は、画面外にある 3 つ目のボタンのフォーカスを設定するために使用する、2 つのボタンを定義しています。

<button id="focus_scroll">クリックでボタンにフォーカス</button>
<button id="focus_no_scroll">
  クリックでスクロールせずにボタンにフォーカス
</button>

<div id="container">
  <button id="myButton" style="margin-top: 500px;">ボタン</button>
</div>

JavaScript

このコードでは、最初のボタンと 2 つ目のボタンにクリックイベントハンドラーを設定し、最後のボタンにフォーカスを設定しています。 最初のハンドラーでは preventScroll オプションを指定していないので、フォーカスされた要素へのスクロールが有効になることに注意してください。

document.getElementById("focus_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus(); // default: {preventScroll:false}
});

document.getElementById("focus_no_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus({ preventScroll: true });
});

結果

最初のボタンを選択すると、フォーカスが設定され、画面の内側のボタンまでスクロールします。 2 つ目のボタンを選択すると、フォーカスは設定されますが、スクロールは無効です。

• HTMLElement.focus() をmousedown イベントハンドラーから呼び出した場合、 HTMLElement からフォーカスが外れないように event.preventDefault() を呼び出す必要があります。
• tabindex やシャドウ DOM など、これまで仕様が定まらないままだった様々な HTML 機能に関するフォーカスの挙動が、最近（2019 年 10 月に）更新されました。 詳しくは WHATWG blog をチェックしてみてください。

• HTMLElement.blur で要素からフォーカスを取り除きます。
• document.activeElement で現在フォーカスされている要素を知ることができます。