【jQuery】tabindexとは？タブで移動する順番を制御する方法

今回は「tabindexとは何か？」「タブで移動する順番の仕組み」「実務ではどう使われているのか？」について説明していきます。

tabindexとは？タブで移動する順番を制御する方法

tabindexとはTabキーでのフォーカス移動を制御するHTML属性です。

キーボードで Tab を押すと

input → select → textarea → button

のようにフォーカスが順番に移動します。

実際にTabを押して確認してみてください！

Tabキーを押してフォーカスの移動順を確認してください。

この順番を制御できるのがtabindexです。上記のサンプルではtabindexの指定はしていません。

ではtabindexを指定してみたいと思います！

Tabキーを押してフォーカスの移動順を確認してください。

1→2→3→4と移動しました。

tabindex = “-1″はTab移動から除外しているためフォーカスされません。

tabindexを実務で使うケース

実務でtabindexを使うケースは…

モーダル表示時に背面をフォーカスさせない

モーダルを開いた時に、裏のフォームにTab移動できてしまうのはNG。

$('.background-area').find('a, button, input').attr('tabindex', -1);

Tab移動させたくないUIにフォーカスさせない

スライダーの矢印、補助ボタン、アイコンなど

<button tabindex="-1">←</button>

通常フォーカスできない要素にフォーカスする

divタグにフォーカスできるようにtabindexを設定

<div tabindex="0">
  カスタムカードUI1
</div>
<div tabindex="1">
  カスタムカードUI2
</div>
<div tabindex="2">
  カスタムカードUi3
</div>

jQueryでtabindexの値を変更

jQueryを使えば、tabindex の値を簡単に変更できます！

$('#target').attr('tabindex', '0');

<input type="text" id="sampleInput">
<button id="changeBtn">tabindexを-1に変更</button>

$(function() {
  $('#changeBtn').on('click', function() {
    $('#sampleInput').attr('tabindex', '-1');
  });
});

disabled状態に応じて切り替えるパターン

<input type="text" id="inputBox" placeholder="">
<button id="toggleBtn">活性／非活性切替</button>

$(function() {
  $('#toggleBtn').on('click', function() {

    var $input = $('#inputBox');

    if ($input.prop('disabled')) {
      $input.prop('disabled', false);
      $input.attr('tabindex', '0');
    } else {
      $input.prop('disabled', true);
      $input.attr('tabindex', '-1');
    }
     var value = $('#inputBox').attr('tabindex');
     alert('今のtabindexの状態は：tabindex='+value);
  });
});

まとめ

tabindexを指定しない場合は、HTMLの表示順に従ってフォーカスが移動します。フォーカスの順番を制御したい場合は、tabindexを設定することで調整できます。ぜひ、参考にしてみてください。

※Tabキーでフォーカスさせたくない要素には tabindex="-1" を指定しましょう