当前位置：文江博客话题详情

HTML tabindex 属性是什么？

发布于 2024-10-01 14:27:38 字数 44 浏览 3 评论 0原文

HTML 中的 tabindex 属性有何用途？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

茶底世界 2024-10-08 14:27:38

tabindex 是 < a href="http://dev.w3.org/html5/markup/global-attributes.html" rel="noreferrer">全局属性负责两件事：

它设置“可聚焦”元素的顺序，
它使元素“可聚焦”。

在我看来，第二件事比第一件事更重要。默认情况下可聚焦的元素非常少（例如和表单控件）。开发人员经常在不可聚焦的元素（

、等）上添加一些 JavaScript 事件处理程序（例如“onclick”），以及如何使界面不仅响应鼠标事件，还响应键盘事件（例如“onkeypress”）是为了使此类元素可聚焦。最后，如果您不想设置顺序，而只是让元素可聚焦，请在所有此类元素上使用 tabindex="0"：

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

此外，如果您不希望通过Tab 键，然后使用 tabindex="-1"。例如，下面的链接在使用 Tab 键遍历时不会获得焦点。

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

tabindex is a global attribute responsible for two things:

it sets the order of "focusable" elements and
it makes elements "focusable".

In my mind the second thing is even more important than the first one. There are very few elements that are focusable by default (e.g. <a> and form controls). Developers very often add some JavaScript event handlers (like 'onclick') on not focusable elements (<div>, <span> and so on), and the way to make your interface be responsive not only to mouse events but also to keyboard events (e.g. 'onkeypress') is to make such elements focusable. Lastly, if you don't want to set the order but just make your element focusable use tabindex="0" on all such elements:

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

Also, if you don't want it to be focusable via the tab key then use tabindex="-1". For example, the below link will not be focused while using tab keys to traverse.

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

回复收藏 0 原文

你不是我要的菜∠ 2024-10-08 14:27:38

当用户按下选项卡按钮时，用户将按照 1、2 和 3 的顺序浏览表单，如下例所示。

例如：

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

When the user presses the tab button the user will be taken through the form in the order 1, 2, and 3 as indicated in the example below.

For example:

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

回复收藏 0 原文

宛菡 2024-10-08 14:27:38

tabindex 用于定义用户遵循的顺序当他们使用 Tab 键浏览页面时。默认情况下，自然跳位顺序将与标记中的源顺序匹配。

tabindex 内容属性允许作者控制元素是否应该是可聚焦的、是否应该可以使用顺序焦点导航到达以及为了顺序焦点导航目的元素的相对顺序是什么。 “选项卡索引”这个名称来源于“tab”键在可聚焦元素中导航的常见用法。术语“选项卡”是指向前移动可使用顺序焦点导航到达的可聚焦元素。
W3C 建议：HTML5
第7.4.1节顺序焦点导航和tabindex属性

tabindex 从 0 或任何正整数开始，并向上递增。通常会避免使用值 0，因为在旧版本的 Mozilla 和 IE 中，tabindex 将从 1 开始，移至 2，只有在 2 之后才会变为 0，然后变为 3。 的最大整数值tabindex 是 32767。如果元素具有相同的 tabindex，则 tabindex 将与标记中的源顺序匹配。负值将从选项卡索引中删除该元素，因此它永远不会获得焦点。

如果为某个元素分配了 tabindex 为 -1，它将删除该元素，并且它永远不会成为焦点，但可以使用 element 以编程方式将焦点赋予该元素。焦点（）。

如果您指定的 tabindex 属性没有值或为空值，它将被忽略。

如果在具有 tabindex 的元素上设置了 disabled 属性，则该元素将被忽略。

如果 tabindex 设置在页面内的任何位置，无论它相对于其余代码的位置（可能在页脚、内容区域等任何位置），如果定义了 < code>tabindex 那么 Tab 键顺序将从显式指定大于 0 的最低 tabindex 值的元素开始。然后它将循环遍历定义的元素，并且仅在显式 之后tabindex 元素已经被 Tab 键切换过，它会返回到文档的开头并遵循自然的 Tab 键顺序。

在 HTML4 规范中，只有以下元素支持 tabindex 属性： anchor< /a>, 区域, 按钮, 输入，object，选择，以及textarea 。但考虑到可访问性，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 标签则可以。

The tabindex is used to define a sequence that users follow when they use the Tab key to navigate through a page. By default, the natural tabbing order will match the source order in the markup.

The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.
W3C Recommendation: HTML5
Section 7.4.1 Sequential focus navigation and the tabindex attribute

The tabindex starts at 0 or any positive whole number and increments upward. It's common to see the value 0 avoided because in older versions of Mozilla and IE, the tabindex would start at 1, move on to 2, and only after 2 would it go to 0 and then 3. The maximum integer value for tabindex is 32767. If elements have the same tabindex then the tabindex will match the source order in the markup. A negative value will remove the element from the tab index so it will never be focused.

If an element is assigned a tabindex of -1 it will remove the element and it will never be focusable but focus can be given to the element programmatically using element.focus().

If you specify the tabindex attribute with no value or an empty value it will be ignored.

If the disabled attribute is set on an element which has a tabindex, the element will be ignored.

If a tabindex is set anywhere within the page regardless of where it is in relation to the rest of the code (it could be in the footer, content area, where-ever) if there is a defined tabindex then the tab order will start at the element which is explicitly assigned the lowest tabindex value above 0. It will then cycle through the elements defined and only after the explicit tabindex elements have been tabbed through, will it return to the beginning of the document and follow the natural tab order.

In the HTML4 spec only the following elements support the tabindex attribute: anchor, area, button, input, object, select, and textarea. But the HTML5 spec, with accessibility in mind, allows all elements to be assigned tabindex.

For example

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

is the same as

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

because regardless of the fact that they are all assigned tabindex="1", they will still follow the same order, the first one is first, and the last one is last. This is also the same..

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

because you do not need to explicitly define the tabIndex if it's default behavior. A div by default will not be focusable, the anchor tags will.

回复收藏 0 原文

鸠魁 2024-10-08 14:27:38

控制页面内的 Tab 键切换顺序（按 tab 键移动焦点）。

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

回复收藏 0 原文

烟酒忠诚 2024-10-08 14:27:38

您设置的值决定键盘焦点在网站上的元素之间移动的顺序。

在下面的示例中，第一次按 Tab 时，光标将移动到 #foo，然后是 #awesome，然后是 #bar

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

如果您没有在任何地方定义 Tab 索引，键盘焦点将按顺序跟随页面的 HTML 标签它们是在 HTML 文档中定义的。

如果您按 Tab 的次数多于指定的 tabindex 的次数，则焦点将像没有 tabindex 一样移动，即按照 HTML 标记的出现顺序

the values you set determine the order that your keyboard focus will move between elements on the website.

In the following example, the first time you press tab, your cursor will move to #foo, then #awesome, then #bar

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

If you have not defined tab indexes anywhere, the keyboard focus will follow the HTML tags of you page in the order in which they are defined in the HTML document.

If you tab more times than you have specified tabindexes for, the focus will move as if there were no tabindexes, i.e. in the order of appearance of the HTML tags

回复收藏 0 原文

慢慢从新开始 2024-10-08 14:27:38

它可用于更改默认表单元素焦点导航顺序。

因此，如果您有：

text input A

text input B

submit button C

通过使用 Tab 键，您可以浏览 A->B->C。 Tabindex 允许您更改该流程。

It can be used to alter the default form element focus navigation sequence.

So if you've got:

text input A

text input B

submit button C

by using the tab key you navigate through A->B->C. Tabindex allows you to change that flow.

回复收藏 0 原文

哆啦不做梦 2024-10-08 14:27:38

通常，当用户在表单中从一个字段切换到另一个字段时（在允许切换的浏览器中，并非所有浏览器都这样做），顺序就是字段在 HTML 代码中出现的顺序。

但是，有时您希望 Tab 键顺序略有不同。在这种情况下，您可以使用 TABINDEX 对字段进行编号。然后选项卡按从最低 TABINDEX 到最高的顺序流动。

方面的更多信息可以在这里找到 w3

有关这插图可以在此处找到

回复收藏 0 原文

栀子花开つ 2024-10-08 14:27:38

简单来说，tabindex 用于关注元素。
语法：tabindex="numeric_value"
这个numeric_value是元素的权重。将首先访问较低的值。

回复收藏 0 原文

生活了然无味 2024-10-08 14:27:38

HTML tabindex 属性负责指示是否可以通过键盘导航访问某个元素 。
当用户按下 Tab 键时，焦点将从一个元素转移到另一个元素。通过使用 tabindex 属性，Tab 顺序流会发生变化。

回复收藏 0 原文

放低过去 2024-10-08 14:27:38

通过控件进行 Tab 键切换通常按照它们出现在 HTML 代码上的顺序进行。

使用 tabindex，选项卡将从具有最低 tabindex 的控件按 tabindex 顺序流向具有最高 tabindex 的控件

回复收藏 0 原文

~没有更多了~

关于作者

夜还是长夜

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

HTML tabindex 属性是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

例如

For example

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

HTML tabindex 属性是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

例如

For example

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。