HTML5

グローバル属性

tabindex

  編集:2022.06.30 by T.A.

mdn

解説

著者が、DOM アンカーとして要素を持つ要素および領域をフォーカス可能領域にする、逐次フォーカス可能にすることを許可または防止する、ならびに逐次フォーカス ナビゲーションの相対的な順序を決定することを可能にする。

妥当な整数である値を持たなければならない。正の数値は、要素のフォーカス可能領域の相対的な位置を順次フォーカス ナビゲーション順序で指定し、負の数値はコントロールが順次フォーカス可能でないことを示す。

以下に、可能な tabindex 属性値の動作の非規範的な概要を示す。

意味
省略、または非整数値 ユーザー エージェントは、要素がフォーカス可能かどうかを決定する。もしそうであるならば、その要素が逐次フォーカス可能またはクリック フォーカス可能(もしくはその両方)かを決定する。
-1、または他の負の整数値 要素がフォーカス可能になり、著者がその要素をクリック フォーカス可能にするが、逐次フォーカス可能にしないことを示す。ユーザー エージェントは、たとえばプラットフォームの規則に従った特定の要素タイプ、またはキーボードのみのユーザーのために、クリックおよび逐次フォーカスの可能性に関するこの設定を無視する場合がある。
0 要素をフォーカス可能にし、著者がその要素をクリック フォーカス可能と逐次フォーカス可能の両方を好むことを示す。ユーザー エージェントは、クリックおよび逐次フォーカスのこの設定を無視する場合がある。
正の整数値 0と同じように動作するが、さらに、tabindex順のフォーカス ナビゲーション スコープ内で相対的な順序を作成するため、tabindex属性値がより大きい要素は後から来る。

tabindex 属性は、要素をフォーカス不可にするために使用できないことに注意する。ページ著者ができる唯一の方法は、要素を無効にする、または要素を不活性にすることである。

<A tabindex=3 href="#A">A要素</A><BR>
<INPUT><BR>
<INPUT tabindex=1><BR>
<INPUT tabindex=0><BR>
<INPUT tabindex=-1><BR>
<BUTTON tabindex=2>BUTTON要素</BUTTON><BR>
<TEXTAREA tabindex=4>TEXTAREA要素
</TEXTAREA><BR>
<SPAN tabindex=5 contenteditable>SPAN要素</SPAN><BR>


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: