ブラウザ標準でフォーカスできる要素(<a>
, <input>
, <textarea>
, <button>
, <select>
, <details>
)以外の要素をフォーカスしたい場合、例えばJavaScriptを用いてインタラクティブなページを作りたい時、<div>などにフォーカスしたい場合がある。
そんな時は、tabindexを使ってフォーカスをあてることができる。
<div tabindex="0">hoge</div>
tabindex属性の値については以下の通り。指定がなければ0となる。
値 | 説明 |
-1(負の数値) | tabでのフォーカス不可 |
0 | tabでのフォーカス可、基準となる順序(基本的には0を入れる) |
1以上(正の数値) | tabでのフォーカス可、小さい値から順にフォーカスされる(0が最後になる) |
イベントの設定
ただし、tabindexでフォーカスしている要素にはaddEventListener(‘click’)のイベントが使えなくなるため、代わりにfocusを使用する。
div.addEventListener('focus', e => {
console.log(e);
});