SYNCERのロゴ
アイキャッチ画像

tabindex属性 - フォーカスの制御

tabindex属性は、キーボードフォーカスにおいて、要素をどのような取り扱いにするのか設定するための属性です。対象外にしたり、順番を設定したりできます。また、この属性を付けることで、通常はフォーカスできない要素(p要素など)をフォーカス可能にすることもできます。

概要

DOM Interface
HTMLElement.tabIndex
仕様書
https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex

キーボードフォーカスを制御する数値を指定して下さい。

1以上
数値がTabキーによるフォーカスの順番になる。
0
Tabキーによるフォーカスの対象になるが、順番は設定されない。
-1
Tabキーによるフォーカスの対象にならない。ただし、フォーカスはできる。

説明

数値を指定すれば、それがフォーカスの順番になります。例えば下記のようにすれば、下から上にフォーカスが流れます。

<input tabindex="2">
<input tabindex="1">

0を指定すると、Tabキーによるフォーカスの対象にはなりますが、順番が保証されない状態にできます。

<input tabindex="0">

-1を指定すると、Tabキーによるフォーカスはされません。クリックなどしてフォーカスすることはできます。下記の場合、一番上の次に、一番下の入力フォームにフォーカス移動します。

<input tabindex="1">
<input tabindex="-1">
<input tabindex="2">

この属性を付けると、その要素はフォーカス可能になります。

<p tabindex="1">SYNCER</p>
<div tabindex="0">SYNCER</div>

デモ

tabindex属性のデモです。Tabキーの順序が指定通りになっているのを確認しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE>
<html>
<head>
<style>
input { width: 40% ; font-size: 16px ; }
</style>
<body>
	<p><input tabindex="1" value="tabindex=1"></p>
	<p><input tabindex="4" value="tabindex=4"></p>
	<p><input tabindex="-1" value="tabindex=-1"></p>
	<p><input tabindex="3" value="tabindex=3"></p>
	<p><input tabindex="2" value="tabindex=2"></p>
</body>
</html>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。