tabindexを使ってみる

HTMLタグの属性に tabindex というものがあります。

TABキーでの移動順を指定するもので、 昔はIEだけだったのですが、最近ではFireFoxなどでも バッチリ対応されています。

これまた未対応のブラウザでも実害のないタグですので Webで業務システムを作る場合などは 使用を検討してみてください。

使い方は簡単です。

下のようなHTML書くだけで、フォーカスが、 text1→text3→text2の順番で移動します。

<input type="text" name="text1" tabindex="1">
<input type="text" name="text2" tabindex="3">
<input type="text" name="text3" tabindex="2">

下のサンプルのtext1にフォーカスをセットして Tabキーを押してみてください。 貴方のブラウザが対応していれば、text3にフォーカスが移動します。

横に並べると、あまり意味がありませんが 2列に配置したときなど役に立つときがあります。

ちなみに、tabindexに-1をセットすると 対応しているブラウザの場合、Tabキーではフォーカスがそこに移動しなくなります。

他にも、このtabindexは、 <p>タグなどでも使用することができます。 その場合、普段フォーカスがセットされない 文字にもフォーカスがセットされるので、 いつもと違う動きが面白いです。

Google サイト内検索

Amazonアソシエイト