tabindexで、Tabキーによる移動順序を指定することが可能(1→2→3・・・0)-1を指定すると移動しない

この記事で分かること

  • tabindexについてTabキーによる移動順序を指定することが可能
  • 順序は(1→2→3・・・0)
  • -1を指定するとタブの対象にならない

  説明
tabindex="" 数字 正の数

以前はtabindex=32767までであったが、現在は指定可能

移動順序について

フォーカスの移動順序は、小さい数字(1以上)から大きい数字に向かいます。

・値に 0 が指定されている要素は、tabindex属性が指定されていない場合と同じ扱いになります。(出現する順序でフォーカスが移動します)

つまり、次のように遷移します。

1 → 2 → 3 → (これ以降は出現順序) → 0

-1を指定するとTab移動の対象にならない。

・Tab移動の対象としない場合は値に”-1″をセットすると対象にはならない

サンプルコード

<table border="2" STYLE="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=1"tabindex="1"></td>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=0"tabindex="0"></td>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=32767"tabindex="32767"></td>
</tr>
<tr>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=4"tabindex="4"></td>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=-1"tabindex="-1"></td>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=3"tabindex="3"></td>
</tr>
<tr>
<td style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=123456789"tabindex="123456789"></td>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=2"tabindex="2"></td>
<td  style="width: 33.3333%; border-color: #000000;">
<input type="text"size="25"value="tabindex=5"tabindex="5"></td>
</tr>
</tbody>
</table>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

PAGE TOP