More than 5 years have passed since last update.

aタグ以外にもキーボードフォーカスをあてる方法

Last updated at 2016-08-19Posted at 2016-04-11

マウス操作ではなく Tab key でフォーカスを当てていき、Enterでリンクをクリックしたりできますが、div や span 要素にはフォーカスが通常あたらないところをあてるようにする方法のmemo

`tabindex=""`を付与することで、Tab keyで引っかかるようになる

<span tabIndex="0">spanにフォーカス</span>
<div tabIndex="0">divにフォーカス</div>

負の値を指定
タブフォーカスから除外する
正の値を指定
整数値で振られた順番にフォーカスがあたっていく
0を指定
0は整数値で指定された後に続いてフォーカスがあたるようになる(後回しになる)
- 0どうしは出現順にフォーカスがあたる模様
- 全体的な指定が無い時はtabindex="0"としておくのが無難みたい

spanやdivにフォーカスが当たるようになったのは良いけど、javascriptなどでclick functionで動かすようにしているものだと、フォーカスがあたっても動かないことがあるのでkeypressも入れておくと無難

$(element).on('click', function(e) {
  // クリックしたら処理
});

　↓ jQueryの.on()はイベント名をスペース区切りで複数指定できるのでkeypress を加えておく

$(element).on('click keypress', function(e) {
  // クリックしたら処理
});