如何忽略 tabindex 中的 HTML 元素？答案

【问题标题】：How to ignore HTML element from tabindex?如何忽略 tabindex 中的 HTML 元素？
【发布时间】：2011-07-08 17:59:49
【问题描述】：

在 HTML 中是否有任何方法可以告诉浏览器不允许对特定元素进行标签索引？

在我的页面上，虽然有一个使用 jQuery 呈现的杂项，但当您通过该选项卡时，在选项卡控件移动到页面上的下一个可见链接之前，您会得到很多选项卡按下，因为所有的东西都被选项卡通过在视觉上对用户隐藏。

【问题讨论】：

标签： html tabindex

【解决方案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 />

【讨论】：

Google Chrome 似乎不支持 -1，这是有道理的，因为根据linkW3，从技术上讲，tabIndex 仅支持 0 -32767。所以当我这样做时；我用了 500。但有效。
@Flea 从版本 23 开始，Google Chrome 支持 tabindex 上的 -1。不知道那是多久以前发生的，可能是在 23 之前。我在 Chrome 23、Firefox 18、IE8、IE9 和 Opera 12.11 中测试了“-1”，它全面运行。
我已编辑答案以链接到更新的 HTML5 规范。 tabindex 现在允许有负值。
@JamesDonnelly 感谢您的编辑。为了浏览器的兼容性，我重新添加了对 W3C HTML4 规范的引用。
从 IE 5.01 开始支持 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx

【解决方案2】：

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

不要失去理智，试图弄清楚为什么以编程方式更改的标签索引调用 element.tabindex = -1 不起作用。使用element.tabIndex = -1。

【讨论】：

这似乎应该是评论而不是答案。
嗯，我很高兴读到它，如果它作为评论被埋葬，我可能会错过它。

【解决方案3】：

如果这些元素自然是按 Tab 键顺序排列的元素，例如按钮和锚点，则使用 tabindex="-1" 从 Tab 键顺序中删除它们是一种可访问性的味道。如果他们提供重复的功能，则可以将其从 Tab 键顺序中删除，并考虑将 aria-hidden="true" 添加到这些元素中，以便辅助技术将忽略它们。

【讨论】：

【解决方案4】：

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

【讨论】：

Chrome 的哪个版本？
Chrome 49.0.2623.75（64 位）。
我的版本是 51.0.2704.103。查看this fiddle。你可能有错误的代码，你永远不知道。
@AtulChaudhary，它怎么不工作？你还能专注吗？
一旦字段被禁用，它们将保持禁用状态，这是 IOS9 中的一个问题，但似乎在 IOS10 中有效

【解决方案5】：

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

我为一个长的数据输入表单做了这个，中间有一个按钮。这不是人们经常点击的按钮，所以我不希望他们不小心点击它并按下回车键。 disabled 不起作用，因为它是一个按钮。

【讨论】：

【解决方案6】：

方法是添加tabindex="-1"。通过将此添加到特定元素，它会通过键盘导航变得无法访问。有一篇很棒的文章here 可以帮助你进一步了解tabindex。

【讨论】：