HTMLElement: focus() メソッド
HTMLElement.focus()
メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。フォーカスされた要素は、既定でキーボードや同様のイベントを受け取る要素です。
既定では、ブラウザーは要素をフォーカスした後、スクロールして表示します。また、フォーカスした要素を可視的に示すこともあります(通常は、要素の周りに「フォーカスリング」を表示します)。 既定では、スクロールを無効化し、要素に可視的な表示を強制するための引数オプションが提供されています。
構文
focus()
focus(options)
引数
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 つ目のボタンを選択すると、フォーカスは設定されますが、スクロールは無効です。
仕様書
Specification |
---|
HTML Standard # dom-focus-dev |
メモ
HTMLElement.focus()
をmousedown イベントハンドラーから呼び出した場合、HTMLElement
からフォーカスが外れないようにevent.preventDefault()
を呼び出す必要があります。tabindex
やシャドウ DOM など、これまで仕様が定まらないままだった様々な HTML 機能に関するフォーカスの挙動が、最近(2019 年 10 月に)更新されました。 詳しくは WHATWG blog をチェックしてみてください。
ブラウザーの互換性
BCD tables only load in the browser
関連情報
HTMLElement.blur
で要素からフォーカスを取り除きます。document.activeElement
で現在フォーカスされている要素を知ることができます。