HTML中是否有任何方法告诉浏览器不允许对特定元素进行标签索引?
在我的页面上虽然有一个使用jQuery呈现的sideshow,当你选中它时,你会得到很多标签按下,然后标签控件移动到页面上的下一个可见链接,因为所有的东西都是通过标签显示的用户可视地隐藏。
答案 0 :(得分:504)
您可以使用tabindex="-1"
。
W3C HTML5 specification支持否定tabindex
值:
如果值为负整数
用户代理必须设置元素的tabindex焦点标志,但不应允许使用顺序焦点导航来到达元素。
请注意,这是HTML5功能,可能不适用于旧浏览器 要符合W3C HTML 4.01 standard (from 1999)标准,tabindex必须是正面的。
纯HTML中的示例用法。
<input />
<input tabIndex="-1" placeholder="NoTabIndex" />
<input />
答案 1 :(得分:95)
不要忘记,即使tabindex
在规范和HTML中都是小写,但在 Javascript / DOM中,该属性称为tabIndex
。< / p>
不要试图弄清楚为什么以编程方式更改调用element.tabindex = -1
的标签索引不起作用的原因。使用element.tabIndex = -1
。
答案 2 :(得分:8)
如果这些元素在按钮和锚点等标签顺序中是自然的,则使用tabindex = -1从Tab键顺序中删除它们是一种可访问性的气味。如果他们提供重复功能,可以从Tab键顺序中删除它们,并考虑在这些元素中添加aria-hidden = true,这样辅助技术就会忽略它们。
答案 3 :(得分:6)
如果您使用的是不支持tabindex="-1"
的浏览器,则可能只需提供需要跳过的内容非常高的标签索引 。例如,tabindex="500"
基本上将对象的Tab键顺序移动到页面的末尾。
我为一个长数据输入表单执行了此操作,其中间有一个按钮。这不是人们经常点击的按钮所以我不希望他们不小心标记到它并按回车键。 disabled
无效,因为它是一个按钮。
答案 4 :(得分:5)
这样的黑客喜欢&#34; tabIndex = -1&#34; Chrome v53不适用于我。
这适用于Chrome和大多数浏览器:
function removeTabIndex(element) {
element.removeAttribute('tabindex');
}
&#13;
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>
&#13;
答案 5 :(得分:2)
只需将属性disabled
添加到元素中(或使用jQuery为您执行此操作)。禁用可防止输入被聚焦或选择。
答案 6 :(得分:0)
执行此操作的方法是添加tabindex="-1"
。通过将其添加到特定元素,键盘导航将变为无法访问。有一篇很棒的文章here可以帮助您进一步了解 tabindex 。