tabindex 属性 | グローバル属性 | リファレンス

tabindex属性とは

tabindex属性は、Tabを押した時に、リンクやフォームの各部品にフォーカス（選択状態）を移動する順番を指定する属性です。属性値には数値（" 正の数 "、" 0 "、" 負の数 "）を指定します。この属性を利用すれば、Tabを押した時に、tabindex属性の数値が" 1 "の要素から順番にフォーカスします。なお、tabindex属性を" 0 "に指定した要素は、tabindex属性が最大値（正の数）の要素の後にフォーカスされます。その後（tabindex属性が" 0 "の要素の後）、tabindex属性を指定していないリンクやフォームの各部品にフォーカスされます。tabindex属性を" 負の値 "に指定した場合は、クリックによるフォーカスは可能ですが、Tabによるフォーカスが無効になります。

属性値

" 正の数 "：数値が小さい方から順番にフォーカス
" 0 "：数値が最大のtabindex属性の後にフォーカス
" 負の数 "： Tabによるフォーカスの移動を無効（クリックによるフォーカスの移動は有効）

利用できるバージョン（HTML4.01以降）

全てのバージョン

HTML5より前のバージョンで指定できる要素

<a>、<area>、<button>、<input>、<object>、<select>、<textarea> のみ

対応ブラウザ

Chrome
Firefox
Internet Explorer
Opera
Safari

tabindex属性を使う要素

tabindex属性は、グローバル属性ですが、実際には下記の要素に利用します。

<a> 要素（href属性が指定されてる）
<link>要素（href属性が指定されてる）
<button> 要素
<input> 要素（type属性が” hidden “以外）
<select> 要素
<textarea> 要素
<menuitem> 要素
draggable 属性が指定されている要素

tabindex属性を使ったサンプル

tabindex属性の例

<form action="">
  <dl>
    <dt>3番目に移動</dt>
    <dd><input type="text" tabindex="3"></dd>
    <dt>2番目に移動</dt>
    <dd><input type="text" tabindex="2"></dd>
    <dt>1番目に移動</dt>
    <dd><input type="text" tabindex="1"></dd>
    <dt>4番目に移動</dt>
    <dd><input type="text" tabindex="0"></dd>
    <dt>タブによる移動を無効</dt>
    <dd><input type="text" tabindex="-1"></dd>
  </dl>
</form>

ブラウザでの表示例

RERUN

新しいウインドウで表示する