search
LoginSignup
16

More than 5 years have passed since last update.

posted at

updated at

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

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

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

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

値には数値が入力可能

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

clickイベントをつけているときは'keypress'でも同様に動くようしておいた方がよさそう

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
16