tabindex属性
tabindex属性は、要素のタブインデックスを指定するグローバル属性。
| ブラウザ対応 |      |
|---|
構文
<element tabindex="整数">
- 正の整数
- タブによる移動順序を示す。
- タブ移動時、指定した数値の順にフォーカスする。クリックによるフォーカスもできる。
- 負の整数
- タブ移動時にフォーカスしない。クリックによるフォーカスはできる。
- 0
- タブ移動時、ドキュメントにおける相対的な順番でフォーカスする。クリックによるフォーカスもできる。
要点
- 要素のタブインデックスを指定する。
- 全てのHTML要素で使用できるグローバル属性である。
- 下記の表の通り、tabindex属性の指定によるフォーカス可否は、タブ移動時かクリック時か、フォーカス可能な要素かフォーカス不可の要素かなどの条件により異なる。
| tabindex | フォーカス可能な要素 （※１） | フォーカス不可の要素 （※２） | ||
|---|---|---|---|---|
| タブ | クリック | タブ | クリック | |
| 正の整数 | ○ 指定した数値の順番 |
○ | ○ 指定した数値の順番 |
○ |
| 負の整数 | × | ○ | × | ○ |
| 0 | ○ ドキュメントにおける相対的な順番 |
○ | ○ ドキュメントにおける相対的な順番 |
○ |
| 指定なし | ○ ドキュメントにおける相対的な順番 |
○ | × | × |
※１：「フォーカス可能な要素」とは、a要素やフォーム部品など、元々フォーカスできる要素のこと。
※２：「フォーカス不可の要素」とは、p要素やspan要素など、元々フォーカスできない要素のこと。
サンプルコード
正の整数
<input type="text" tabindex="1"> <span tabindex="3"></span>
負の整数
<input type="text" tabindex="-1"> <span tabindex="-3"></span>
0
<input type="text" tabindex="0"> <span tabindex="0"></span>
サンプル
HTMLソースコード
<style scoped="scoped">
input {
width: 15%;
border: 1px solid red;
text-align: center;
}
input:focus {
background-color: yellow;
}
span {
display: inline-block;
width: 15%;
border: 1px solid blue;
text-align: center;
}
span:focus {
background-color: yellow;
}
</style>
<p>input要素</p>
<p>
<input type="text" tabindex="1" value="1">
<input type="text" tabindex="-1" value="-1">
<input type="text" tabindex="0" value="0">
<input type="text" value="指定なし">
</p>
<p>
<input type="text" tabindex="2" value="2">
<input type="text" tabindex="-2" value="-2">
<input type="text" tabindex="0" value="0">
<input type="text" value="指定なし">
</p>
<p>
<input type="text" tabindex="3" value="3">
<input type="text" tabindex="-3" value="-3">
<input type="text" tabindex="0" value="0">
<input type="text" value="指定なし">
</p>
<p>
<input type="text" tabindex="4" value="4">
<input type="text" tabindex="-4" value="-4">
<input type="text" tabindex="0" value="0">
<input type="text" value="指定なし">
</p>
<p>
<input type="text" tabindex="5" value="5">
<input type="text" tabindex="-5" value="-5">
<input type="text" tabindex="0" value="0">
<input type="text" value="指定なし">
</p>
<p>span要素</p>
<p>
<span tabindex="6">6</span>
<span tabindex="-6">-6</span>
<span tabindex="0">0</span>
<span>指定なし</span>
</p>
<p>
<span tabindex="7">7</span>
<span tabindex="-7">-7</span>
<span tabindex="0">0</span>
<span>指定なし</span>
</p>
<p>
<span tabindex="8">8</span>
<span tabindex="-8">-8</span>
<span tabindex="0">0</span>
<span>指定なし</span>
</p>
<p>
<span tabindex="9">9</span>
<span tabindex="-9">-9</span>
<span tabindex="0">0</span>
<span>指定なし</span>
</p>
<p>
<span tabindex="10">10</span>
<span tabindex="-10">-10</span>
<span tabindex="0">0</span>
<span>指定なし</span>
</p>
実際の表示
input要素
span要素
6 -6 0 指定なし
7 -7 0 指定なし
8 -8 0 指定なし
9 -9 0 指定なし
10 -10 0 指定なし