HTML チュートリアル: tabIndex を使用して Web ページ ナビゲーションを簡単に実装する

最近、Web サイトでフォームにデータを入力しているときに、ある列を入力し、[Tab] キーをクリックして次の列に移動すると、カーソルが別の列にジャンプしていて驚きました。ページの一番下。マウスを使用してカーソルを正しいテキストフィールドに移動しましたが、すぐに [Tab] キーの問題が再び発生しました。この状況を踏まえて、ページのデザインと、tabIndex プロパティがキーボードによるナビゲーションをどのように支援するかを見てみたいと思いました。

[Tab] キーを使用して要素にアクセスします

HTML DOM tabIndex 属性を使用すると、HTML 要素のタブ オーダーを設定または返すことができます。 IE
4.0 がこの機能を初めてサポートします。初期状態では、入力フィールドやリンクなど、[Tab] キーを使用して実際にアクセスできる要素のみがサポートされています。現在、すべての Web ブラウザーとページに表示されるすべての要素がこの機能をサポートしています。適用する前に、HTML 仕様をダブルクリックして、要素がこの機能をサポートしていることを確認できます。

tabIndex 機能

tabIndex 機能の適用はシンプルで簡単なプロセスです。たとえば、次の HTML ソース コードは、タブ オーダーの最初の列である入力フィールドに tabIndex 値 1 を割り当てます:

最初に [Tab] キーが選択されている場合、この入力フィールドのある Web ページではカーソルが firstName フィールドに移動します。

tabIndex 属性に値を割り当てるときは、いくつかの問題に注意する必要があります。以下にいくつかの割り当てルールを示します。 tabIndex が 0 の要素は、ソース コード (またはデフォルトのページ動作) に従って並べ替えられます。

tabIndex 値が 0 より大きい場合、タブ オーダーが設定されます。正の tabIndex 値を持つすべての要素は、0 tabIndex 値を持つすべての要素の前に表示されます。

間違って複数の要素に同じtabIndexを割り当てた場合、他の要素と同様に値0のtabIndexで処理されます。

tabIndexを-1に割り当てると、[Tab]キーを使用するときにこの要素は無視されます。注: -1 の値が使用された場合でも、onfocus イベントと onblur イベントはアクティブ化されます。

tabIndexの値は0から32767までの任意の数値です。

リスト A のサンプル HTML コードは、ページ上の各項目に tabIndex 値を割り当てます。入力フィールドと DIV タグには tabIndex 属性が含まれており、ユーザーはキーボードを使用してページ要素を参照できます。 (DIV タグはフォーカスの取得に関する多くの情報を提供しませんが、非入力要素での tabIndex の使用法を説明したかったのです。) -1 の値を持つボタンには値が割り当てられ、[Tab] ]キーが適用されます。

入力要素がいっぱいになった (最大長に達した) 場合、小さな JavaScript スクリプトを追加して自動配置機能を実装できます。これは基本的な関数です。スクリプトがその機能をどのように実装しているかを見てみましょう:

function checkLen(x,y) {
if
(y.length==x.maxLength) {
var next=x.tabIndex
if ( next <
document.getElementById("frmTest").length)
{
document.getElementById("frmTest").elements[next-1].focus()
} }
}

2 つの変数。最初の変数は入力フィールドで、2 番目の変数にはフィールドの値が含まれます。そして、列の長さを列の最大許容長と比較します。それらが等しい場合 (つまり、列がいっぱいである場合)、tabIndex の値が列から読み取られ、値が最大長より小さい場合、フォーカスは次の列に移動します。

この関数は各列の onkeyup イベントに値を割り当てるため、列に値が入力されるたびにこの関数を呼び出して、値が最大長に達しているかどうかを確認する必要があります。最大値に達すると、カーソルはタブ オーダーの次の列に移動します。リスト B のソース コードは、この関数を上記の例に追加します。

アクセシビリティの向上

要素に tabIndex を指定すると、キーボードを頻繁に使用するユーザーが、障害者が使用する PDA、携帯電話、スクリーン リーダーなどの非標準ユーザーがより簡単にアクセスできるようになります。から恩恵を受けました。アプリケーションの機能を拡張するものはすべて有益です。

簡単な Web フォームのデザインに多くの時間を費やして、視覚的に魅力的であり、バックエンド サーバー コンポーネントで正しく処理できるようにする場合があります。ただし、標準以外のテクノロジやブラウザでのテストを怠っている可能性があります。典型的な例は、マウスを放棄し、キーボードに頼ってフォーム内を移動することです。 HTML 標準には tabIndex 属性が含まれており、[Tab] キーを使用してアクセスする項目を制御できます。

上記は HTML チュートリアルの内容です: tabIndex を使用して Web ナビゲーションを簡単に実現する さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。