web-dev-qa-db-ja.com

HTML tabindex属性とは何ですか？

HTMLで使用されるtabindex属性は何ですか？

htmltabindex
220
sleep

tabindex は global attribute は2つのことを担当します：

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

私の考えでは、2番目の要素は最初の要素よりもさらに重要です。デフォルトでフォーカス可能な要素はごくわずかです（例：<a>およびフォームコントロール）。開発者は多くの場合、フォーカスできない要素（<div>、<span>など）にJavaScriptイベントハンドラー（「onclick」など）を追加し、マウスイベントだけでなくキーボードイベントにもインターフェイスを反応させる方法を追加します。 （例： 'onkeypress'）は、そのような要素をフォーカス可能にします。最後に、順序を設定したくないが、要素をフォーカス可能にしたい場合は、そのような要素すべてでtabindex="0"を使用します。

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

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

<a href="#" tabindex="-1">Tab key cannot reach here!</a>
295
Konstantin Smolyanin

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

例えば：

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />
55
Robert

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

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

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

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

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

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

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

HTML4仕様では、次の要素のみがtabindex属性をサポートしています： anchor 、 area 、 button 、 input 、- オブジェクト 、 選択 、および テキストエリア 。ただし、アクセシビリティを考慮した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タグはフォーカスできません。

23
davidcondrey

タブの順序を制御する（を押す tab ページ内でフォーカスを移動するキー）。

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

18
Tom

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

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

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

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

Tabindexesを指定した回数よりも多くタブする場合、フォーカスはtabindexesが存在しないかのように、つまりHTMLタグの出現順に移動します

8
Eldamir

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

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

text input A

text input B

submit button C

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

3
cherouvim

通常、ユーザーがフォーム内のフィールドからフィールドへタブで移動する場合（タブ移動が可能なブラウザーで、すべてのブラウザーが実行できるわけではありません）、順序はHTMLコードでフィールドが表示される順序です。

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

詳細については、こちらをご覧ください w

別の良いイラストを見つけることができます こちら

3
Mulki

簡単に言えば、tabindexは要素に焦点を合わせるために使用されます。構文：tabindex="numeric_value"このnumeric_valueは要素の重みです。低い値が最初にアクセスされます。

2
Aman Dhanda

HTML tabindex 属性はキーボードナビゲーションで要素に到達できる場合を示す役割を果たします。ユーザーがTabキーを押すと、フォーカスがシフトある要素から別の要素に移動します。 tabindex属性を使用すると、タブオーダーフローがシフトされます。

1
Nesha Zoric

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

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

0
Kamal