tabのフォーカスの順番を変える方法

ひろゆき

ひろゆき

tabのフォーカスの順番を変える方法

お問い合わせなどのフォームでtabを押すと順番にフォーカスを変えることができると思います。通常このフォーカスが移動する順番はhtmlで記述されている順番(上から下)になっています。しかし、デザインなどによっては見た目の順番と記述の順番が違っていることがあると思います。このようなときに使えるのがtabindexです。

tabindexはhtmlで用意されている属性で、フォーカスの順番を意図的に変えることができます。要素に0~32767の数値を割り振ることができ、割り振られた数値の大きいものからフォーカスされていきます。数値を設定していない要素は数値の設定してある要素の後にフォーカスされます。

方法

記述方法は tabindex=”n”  €(nは0~32767の整数)を要素の中に記述してやるだけです。

例えばtextareaであれば

<textarea id=”aaaaaaa” class=”aaaaaaaa” tabindex=”5″>

</textarea>

みたいな感じでokです。

ちなみにwordpressプラグインのcontactformなどでもtabindexは使えます。contactformであれば

みたいな感じでokだと思います。

tabindexが使えない場合

フォームプラグインによってはtabindexが使えない場合もあるかもしれません。そのような場合tabindexが使えるプラグインに切り替えるか、フォームを直接htmlで記述するかもしくはhtmlのマークアップ自体を順番どおりに記述する方法が考えられます。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

エンジニアのひろゆきや。大阪生まれの大阪育ち。LIGを代表するエンジニアになるため、頑張るで。ほんま、よろしくやで。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL