タブインデックスの順序を設定してカーソル移動の動作を制御する

2024年3月23日最新技術情報

HTML画面において、Tabキーを押下したときの選択状態を示すカーソル位置の移動の順番を制御する方法をご紹介します。

タブインデックスの動作

HTML画面でTabキーを押下すると、割り当てられているタブインデックスの数値の小さいものから順に選択状態が移動していきます。
タブインデックスは通常、コントロールが配置された順番に値が割り振られていくため、コントロールの順番を入れ替えるなどした場合には、手動で値の振りなおしが必要になります。

タブインデックス値の変更

Tabキーのカーソル移動は、タブインデックスの値の若番から順番に選択されていく仕様となっています。コントロールの位置を変更するなどした場合には選択したい順番を意識して値を割り振りましょう。
なお、タブインデックスはボタンにも割り振られています。

①HTMLキャンバスにてタブインデックスの値を変更したいコントロールを選択
②「プロパティ」にマウスオーバー
③タブインデックスの値を変更

はっきりと配置のイメージがついていないときオススメの割り振り方は「10刻み」だよ!
間に新しいコントロールを増やしたり、位置を入れ替えたりしたとき、タブインデックスの値をすべて見直さないといけないのは手間だよね。
そんなときあらかじめ10刻みで値を振ってあれば、変更に合わせて間の数字に変えてあげるだけでタブインデックスも意図した動作をしてくれるよね!