●この記事で分かること
- 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>
コメントを残す