tabindex=""

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O

tabindex属性で、Tabキーによるフォーカスの移動順序を指定することができます。


<a href="index.html" tabindex="1">リンクテキスト</a>
属性 値 説明
tabindex="" 数字 0 ～ 32767 までの数で指定

移動順序

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

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

例えば、4つの要素に 0 ～ 3 の値を指定した場合は、次の順序でフォーカスが移動することになります。

1 → 2 → 3 → （これ以降は出現順序） → 0

値の指定について

この属性の値は、連番である必要はありません。また、任意の数字で開始することができます。

3 → 5 → 6 → 9

複数の要素に同じ数字が指定されている場合は、それらは出現順序でフォーカスが移動することになります。

1 → 2 → 2 → 3

指定できる要素

この属性は、以下の要素で使用することができます。

使用例

下から上にフォーカスを移動させた例
  • Tabキーを押す前に、一番下のコメント欄を選択しておいてください。

<p>tabindex="5"<br>
<input type="text" name="example1" size="30" tabindex="5"></p>

<p>tabindex="4"<br>
<input type="text" name="example2" size="30" tabindex="4"></p>

<p>tabindex="3"<br>
<input type="text" name="example3" size="30" tabindex="3"></p>

<p>tabindex="2"<br>
<input type="text" name="example4" size="30" tabindex="2"></p>

<p>
tabindex="1"<br>
<textarea name="example5" cols="30" rows="5" tabindex="1">コメント欄</textarea>
</p>
表示例

tabindex="5"

tabindex="4"

tabindex="3"

tabindex="2"

tabindex="1"