235

tabindexHTML で使用される属性は何ですか?

4

10 に答える 10

309

tabindexは、次の 2 つの役割を担うグローバル属性です。

  1. 「フォーカス可能な」要素の順序を設定し、
  2. 要素を「フォーカス可能」にします。

私の考えでは、2番目のことは最初のものよりもさらに重要です。デフォルトでフォーカス可能な要素はほとんどありません (例: <a> やフォーム コントロール)。開発者は、フォーカスできない要素 (<div>、<span> など) にいくつかの JavaScript イベント ハンドラー ('onclick' など) を追加することが非常に多く、マウス イベントだけでなくキーボード イベントにもインターフェイスを応答させる方法を追加します。 (例えば「onkeypress」) は、そのような要素をフォーカス可能にするためのものです。最後に、順序を設定したくないが、そのtabindex="0"ようなすべての要素で要素をフォーカス可能にするだけの場合:

<div tabindex="0"></div>

また、Tab キーでフォーカス可能にしたくない場合は、 を使用しますtabindex="-1"。たとえば、以下のリンクは、タブ キーを使用して移動している間はフォーカスされません。

<a href="#" tabindex="-1">Tab key cannot reach here!</a>
于 2013-09-25T09:01:36.403 に答える
55

ユーザーがタブ ボタンを押すと、次の例に示すように、1、2、3 の順序でフォームが表示されます。

例えば：

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />
于 2010-11-06T08:37:09.530 に答える
25

は、ユーザーが Tab キーを使用してページ内を移動するときにたどる順序を定義するために使用されます。デフォルトでは、自然なタブ順序はマークアップのソース順序と一致します。

tabindex content 属性を使用すると、作成者は、要素がフォーカス可能であると想定されるかどうか、シーケンシャル フォーカス ナビゲーションを使用して到達可能であると想定されるかどうか、およびシーケンシャル フォーカス ナビゲーションを目的とした要素の相対的な順序を制御できます。「タブ インデックス」という名前は、フォーカス可能な要素をナビゲートするための「タブ」キーの一般的な使用に由来します。「タブ移動」という用語は、シーケンシャル フォーカス ナビゲーションを使用して到達できるフォーカス可能な要素を前方に移動することを指します。
W3C 勧告: HTML5
セクション 7.4.1 シーケンシャル フォーカス ナビゲーションと tabindex 属性

はtabindex0 または任意の正の整数から始まり、上に向かって増加します。Mozilla と IE の古いバージョンでは、tabindex は 1 から始まり、2 に移動し、2 の後でのみ 0 に移動し、次に 3 に移動するため、値 0 が回避されるのが一般的です。 の最大整数値はtabindexです32767。要素が同じであるtabindex場合、tabindex はマークアップ内のソースの順序と一致します。負の値を指定すると、要素がタブ インデックスから削除されるため、フォーカスされることはありません。

tabindex要素にが割り当てられている場合、その要素は-1削除され、フォーカスできなくなりますが、 を使用してプログラムで要素にフォーカスを与えることができますelement.focus()。

tabindex値なしまたは空の値で属性を指定すると、無視されます。

disabledを持つ要素に属性が設定されている場合tabindex、その要素は無視されます。

atabindexがページ内のどこに設定されていても、コードの残りの部分との関係に関係なく (フッター、コンテンツ領域など、どこにでも) が定義されているtabindex場合、タブ オーダーはその要素から開始されます。これには、0 より大きい最小tabindex値が明示的に割り当てられます。次に、定義された要素を循環し、明示的なtabindex要素がタブで移動された後にのみ、ドキュメントの先頭に戻り、自然なタブ オーダーに従います。

HTML4 仕様では、次の要素のみが tabindex 属性をサポートしています: 、、、、、、および。しかし、アクセシビリティを考慮した HTML5 仕様では、すべての要素を割り当てることができますtabindex。

--

例えば

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

と同じです

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

それらがすべて割り当てられているという事実に関係なく、tabindex="1"それらは同じ順序に従います。最初のものが最初で、最後のものが最後です。これも同じ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

デフォルトの動作である場合、tabIndex を明示的に定義する必要がないためです。デフォルトでは、タグはdivフォーカス可能ではありません。anchor

于 2015-02-01T19:21:26.760 に答える
18

ページ内のタブ (tabキーを押してフォーカスを移動する) の順序を制御します。

参照: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

于 2010-11-06T07:12:36.400 に答える
8

設定した値によって、キーボード フォーカスが Web サイト上の要素間を移動する順序が決まります。

次の例では、最初にタブを押すと、カーソルが #foo、#awesome、#bar の順に移動します。

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

タブ インデックスをどこにも定義していない場合、キーボード フォーカスは、HTML ドキュメントで定義されている順序でページの HTML タグに従います。

指定した tabindexes よりも多くタブを押すと、フォーカスは tabindexes がないかのように移動します。つまり、HTML タグの出現順に移動します。

于 2013-08-15T09:31:42.300 に答える
3

デフォルトのフォーム要素のフォーカス ナビゲーション シーケンスを変更するために使用できます。

あなたが持っている場合：

text input A

text input B

submit button C

Tab キーを使用して、A->B->C をナビゲートします。Tabindex を使用すると、そのフローを変更できます。

于 2010-11-06T07:11:52.263 に答える
3

通常、ユーザーがフォーム内のフィールドからフィールドへとタブ移動する場合 (すべてのブラウザでタブ移動が許可されているわけではありませんが、タブ移動が許可されているブラウザでは)、その順序は HTML コードでフィールドが表示される順序になります。

ただし、タブ オーダーの流れを少し変えたい場合もあります。その場合、TABINDEX を使用してフィールドに番号を付けることができます。次に、タブは、TABINDEX が最も低いものから最も高いものへと順番に流れます。

これに関する詳細情報は、ここにありますw3

別の良いイラストがここにあります

于 2010-11-06T07:16:47.867 に答える
0

コントロールのタブ移動は、通常、HTML コードに表示される順に行われます。

tabindex を使用すると、タブ移動は、最も低い tabindex を持つコントロールから最も高い tabindex を持つコントロールに、tabindex の順序で流れます。

于 2010-11-06T07:13:55.573 に答える