tabindex属性

tabindex属性とは

Webページを表示している時、タブキーを押すことで一番上にあるリンクやテキストボックスなどがフォーカス(選択)されます。また、タブキーを押すたびに、次のリンクやテキストボックスなどにフォーカスが移ります。

tabindexは、このフォーカスを制御します。値は、以下が使えます。

• マイナスの整数：タブでフォーカスされません。クリックしてフォーカスは可能です。通常は、-1を使います。
• 0：タブでフォーカスされます。上からの順番に従います。
• プラスの整数：タブでフォーカスされます。数字が小さいほど、早くフォーカスされます。

tabindexにより、クリックでのフォーカスは停止できません。タブキーでのフォーカスを制御するだけです。

tabindexはグローバル属性のため、すべてのHTML要素で使えます。pなど、通常はフォーカスされない要素でも、tabindexは有効です。この時、値にかかわらずクリックでのフォーカスが可能になるブラウザもあります。

利用例

tabindexの利用例は、以下のとおりです。

<input type="text" name="test" tabindex="-1">

上記により、テキストボックスはタブでフォーカスされなくなります。マウスをクリックしてフォーカスすることは可能です。

もう1つの例です。

<input type="text" name="test1" tabindex="2">
<input type="text" name="test2" tabindex="1">

上記により、下のテキストボックス(name="test2")がタブで最初にフォーカスされます。もう一回タブキーを押すと、上のテキストボックス(name="test1")がフォーカスされます。

フォーカス可能な要素

デフォルトでフォーカス可能な要素の例は、以下のとおりです。

• href属性があるa要素
• button要素
• hidden属性を使わないinput要素
• select要素
• textarea要素

これらは、tabindexを使わなくても、マウスでクリックしてフォーカス可能です。また、タブキーを押すと上から順番にフォーカスされます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。