Web デザイン TabIndex 要素

TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素間にフォーカスを設定します。

フォームを作成または入力したことがある人なら誰でも、Tab キーを使用すると各入力に 1 つずつフォーカスを移動できることに気付くでしょう。これは、取得したくない場合や、取得順序を変更する場合など、実際に変更することができます。

フォーム（登録、ログインなど）に入力する際、多くのユーザーはマウスを使用せず、直接 Tab キーを押して次のテキストボックスに移動し、すべてが入力されるまで待ってから送信します。これは非常に優れた便利な機能です。私の個人的な習慣では、すべての情報を入力した後、通常はマウスで送信ボタンをクリックして送信し、Tab キーでフォーカスがボタンにジャンプしないようにします。ただし、Tab キーでボタンにジャンプしないことがまれにあります。私の個人的な習慣が原因かどうかはわかりません-_-!!!

何かにフォーカスを当てたくない場合は、tabindex=-x を設定して tabindex の値を負にし、Tab で直接スキップするようにすることができます。

以下は簡単なフォームを使用した例です。

ヒント: 実行前にコードの一部を変更することができます

コードをコピー

コードは次のとおりです。

<フォームメソッド="投稿" アクション="#">
<p><label for="t1">最初に Tab キーを押してテキストボックスにフォーカスを設定します </label><input type="text" id="t1" tabindex="1" /></p>
<p><label for="t2">2 回目に Tab キーを押すと、テキストボックスにフォーカスが設定されます </label><input type="text" id="t2" tabindex="2" /></p>
<p><label for="t3">3 番目に Tab キーを押してテキストボックスにフォーカスを設定します </label><input type="text" id="t3" tabindex="3" /></p>
<p>Tab キーを押しても、テキストボックスにフォーカスが当たらない <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p>
</フォーム>

Tab キーを使用する場合、フォーカスが取得される順序は tabindex の値によってソートされます。上記の例では、t1、t2、t3 が順番にフォーカスされます。t4 になると、TabIndex の値が -1 であるため、t4 はフォーカスを取得せず、フォーカスを取得する次の要素に直接ジャンプします。
t1、t2、t3、t4 の TabIndex 値は実際のニーズに応じて任意に変更でき、Tab フォーカスは小さい値から大きい値まで取得されます。
これを行うには TabIndex を使用します。。。

<<: WeChatアプレットが検索ボックス機能を実装

>>: MySQLのインデックス選択と最適化の詳細な説明