ywork2020.com

Title

タブインデックス属性を使えば、ユーザーインターフェースのフォーカス順番を指定出来る

tabindex属性の概要

キーボードのTabキーを押した時にユーザーインターフェースがアクティブになる順番を指定できます。

実機サンプル

※タブインデックス1をクリックしてアクティブにした状態でキーボードのTabキーを押してみてください。



上のタブインデックス1から下のタブインデックス2にフォーカスが移り、最後に中央のタブインデックス3にフォーカスが移動しているのが分ったでしょうか?

サンプルコード

<body>
	<input id="idTabIndex1" type="text" tabindex="1" value="タブインデックス1">
	<input id="idTabIndex3" type="text" tabindex="3" value="タブインデックス3">
	<input id="idTabIndex2" type="text" tabindex="2" value="タブインデックス2">
</body>
関連のあるページ