Web デザイン TabIndex 要素

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のインデックス選択と最適化の詳細な説明

推薦する

Centos6にMysql5.7をインストールする方法

環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...

Maven で tomcat8-maven-plugin プラグインを使用する詳細なチュートリアル

オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...

js、css、htmlはブラウザのさまざまなバージョンを決定します

正規表現を使用してIEブラウザのバージョンを判別するIEブラウザかどうか確認するif (docume...

webpack-dev-server のコア概念とケースの詳細な説明

webpack-dev-server コアコンセプトWebpack の ContentBase と ...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...

MySQL の null と not null、null と空の値の違いの詳細な説明 ''''

MySQL を長い間使用してきた多くの人は、これら 2 つのフィールド属性の概念をまだよく理解して...

JavaScript での && および || 演算子の使用例

目次序文&& 演算子|| 演算子|| 演算子の簡単なデモ章の目的ケース演習(json...

レアタグフィールドセットと凡例の使用方法の詳細な説明

<fieldset>と<legend>については、ほとんどの人はおそらく馴染...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

フロントエンドにアニメーション遷移効果を実装する方法

目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...

この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...