如何忽略tabindex中的HTML元素？

Question

HTML中是否有任何方法告诉浏览器不允许对特定元素进行选项卡索引？

在我的页面上虽然有一个使用jQuery呈现的sideshow，但是当你选中它时，你会在标签控件移动到页面上的下一个可见链接之前获得大量的标签按下，因为所有被标记的内容被隐藏到用户视觉上。

Answer 1

你可以使用tabindex="-1"。

W3C HTML5 specification支持负tabindex值：

如果该值是负整数 用户代理必须设置元素的tabindex焦点标志，但不应允许使用顺序焦点导航到达元素。

---

请注意，这是HTML5功能，可能无法与旧浏览器一起使用。 要符合W3C HTML 4.01 standard (from 1999)标准，tabindex必须是积极的。

---

纯HTML中的示例用法如下。

<input />
<input tabIndex="-1" placeholder="NoTabIndex" />
<input />

Answer 2

不要忘记，即使tabindex在规范和HTML中都是小写的，在Javascript / DOM中属性称为tabIndex。

不要试图弄清楚为什么你的编程修改标签索引调用element.tabindex = -1不起作用。使用element.tabIndex = -1。

Answer 3

如果这些元素在按钮和锚点之类的Tab键顺序中是自然的，则使用tabindex = -1从Tab键顺序中删除它们是一种可访问性气味。如果他们提供重复功能，从Tab键顺序中删除它们就可以了，并考虑在这些元素中添加aria-hidden = true，这样辅助技术就会忽略它们。

Answer 4

如果您在不支持tabindex="-1"的浏览器中工作，您可能只需要提供需要跳过的高标签索引。例如，tabindex="500"基本上将对象的Tab键顺序移动到页面的末尾。

我这样做了一个长数据输入表单，其中间有一个按钮。这不是人们经常点击的按钮所以我不希望他们不小心标记到它并按Enter键。 disabled无法正常工作，因为它是一个按钮。

Answer 5

使用Chrome v53这样的“tabIndex = -1”这样的黑客行为对我不起作用。

这适用于chrome和大多数浏览器：

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Answer 6

只需将属性disabled添加到元素中（或使用jQuery为您完成）。禁用可防止输入被聚焦或选择。

Answer 7

这样做的方法是添加tabindex="-1"。通过将其添加到特定元素，键盘导航将无法访问它。有一篇很棒的文章here将帮助您进一步了解tabindex。