tabindex
global attribute
indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the
Tab
key, hence the name).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
It accepts an integer as a value, with different results depending on the integer's value:
tabindex="-1"
) means that the element is not reachable via sequential keyboard navigation, but could be focused with Javascript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.
A negative value is useful when you have off-screen content that appears on a specific event. The user won't be able to focus any element with a negative
tabindex
using the keyboard, but a script can do so by calling the
focus()
method
.
tabindex="0"
means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document's source order.
tabindex="4"
is focused before
tabindex="5"
and
tabindex="0"
, but after
tabindex="3"
. If multiple elements share the same positive
tabindex
value, their order relative to each other follows their position in the document source. The maximum value for
tabindex
is 32767. If not specified, it takes the default value 0.
避免使用
tabindex
values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.
If you set the
tabindex
attribute on a
<div>
, then its child content cannot be scrolled with the arrow keys unless you set
tabindex
on the content, too.
Check out this fiddle to understand the scrolling effects of
tabindex
.
Avoid using the
tabindex
attribute in conjunction with non-
interactive content
to make something intended to be interactive focusable by keyboard input. An example of this would be using a
<div>
element to describe a button, instead of the
<button>
元素。
Interactive components authored using non-interactive elements are not be listed in the
accessibility tree
. This prevents assistive technology from being able to navigate to and manipulate those components. The content should be semantically described using interactive elements (
<a>
,
<button>
,
<details>
,
<input>
,
<select>
,
<textarea>
, etc.) instead. These elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by
ARIA
.
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'tabindex' in that specification. |
实时标准 | No change from latest snapshot, HTML 5.1 . |
|
HTML 5.1
The definition of 'tabindex' in that specification. |
推荐 | 快照 HTML 实时标准 , no change from HTML5 . |
|
HTML5
The definition of 'tabindex' in that specification. |
推荐 | 快照 HTML 实时标准 . From HTML 4.01 Specification , the attribute is now supported on all elements (global attributes). |
|
HTML 4.01 Specification
The definition of 'tabindex' in that specification. |
推荐 |
Only supported on
<a>
,
<area>
,
<button>
,
<input>
,
<object>
,
<select>
，和
<textarea>
.
|
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, check out https://github.com/mdn/browser-compat-data and send us a pull request.
更新 GitHub 上的兼容性数据| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
tabindex
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
HTMLElement.tabIndex
that reflects this attribute
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<bgsound>
<big>
<blink>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<content>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<element>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<image>
<img>
<input>
<ins>
<isindex>
<kbd>
<keygen>
<label>
<legend>
<li>
<link>
<listing>
<main>
<map>
<mark>
<marquee>
<menu>
<menuitem>
<meta>
<meter>
<multicol>
<nav>
<nextid>
<nobr>
<noembed>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<plaintext>
<pre>
<progress>
<q>
<rb>
<rp>
<rt>
<rtc>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<shadow>
<slot>
<small>
<source>
<spacer>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
<xmp>
<input>
类型
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">