Html 如何忽略tabindex中的HTML元素?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5192859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to ignore HTML element from tabindex?
提问by Tom Gullen
Is there any way in HTML to tell the browser not to allow tab indexing on particular elements?
HTML 中有什么方法可以告诉浏览器不允许对特定元素进行标签索引吗?
On my page though there is a sideshow which is rendered with jQuery, when you tab through that, you get a lot of tab presses before the tab control moves to the next visible link on the page as all the things being tabbed through are hidden to the user visually.
在我的页面上,虽然有一个用 jQuery 呈现的sideshow,但当您通过它进行选项卡时,在选项卡控件移动到页面上的下一个可见链接之前,您会得到很多选项卡按下,因为所有被选项卡操作的内容都隐藏到用户在视觉上。
回答by Martin Hennings
You can use tabindex="-1"
.
您可以使用tabindex="-1"
.
The W3C HTML5 specificationsupports negative tabindex
values:
的W3C HTML5规范支持负tabindex
的值:
If the value is a negative integer
The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.
如果值为负整数
用户代理必须设置元素的 tabindex 焦点标志,但不应允许使用顺序焦点导航到达元素。
Watch out though that this is a HTML5 feature and might not work with old browsers.
To be W3C HTML 4.01 standard (from 1999)compliant, tabindex would need to be positive.
但请注意,这是一项 HTML5 功能,可能不适用于旧浏览器。
要符合W3C HTML 4.01 标准(从 1999 年开始),tabindex 需要为正数。
Sample usage below in pure HTML.
下面是纯 HTML 中的示例用法。
<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />
回答by Eric L.
Don't forget that, even though tabindex
is all lowercase in the specs and in the HTML, in Javascript/the DOM that property is called tabIndex
.
不要忘记,即使tabindex
在规范和 HTML 中都是小写的,但在Javascript/ DOM 中,该属性被调用tabIndex
。
Don't lose your mind trying to figure out why your programmatically altered tab indices calling element.tabindex = -1
isn't working. Use element.tabIndex = -1
.
不要失去理智,试图找出以编程方式更改的选项卡索引调用element.tabindex = -1
不起作用的原因。使用element.tabIndex = -1
.
回答by Matt
If these are elements naturally in the tab order like buttons and anchors, removing them from the tab order with tabindex=-1 is kind of an accessibility smell. If they're providing duplicate functionality removing them from the tab order is ok, and consider adding aria-hidden=true to these elements so assistive technologies will ignore them.
如果这些元素是按 Tab 键顺序自然排列的元素,例如按钮和锚点,则使用 tabindex=-1 从 Tab 键顺序中删除它们是一种可访问性气味。如果他们提供重复的功能,从 Tab 键顺序中删除它们是可以的,并考虑向这些元素添加 aria-hidden=true 以便辅助技术将忽略它们。
回答by Jemmeh
If you are working in a browser that doesn't support tabindex="-1"
, you may be able to get away with just giving the things that need to be skipped a really high tab index. For example tabindex="500"
basically moves the object's tab order to the end of the page.
如果您在不支持 的浏览器中工作 tabindex="-1"
,您可能只需将需要跳过的内容设置为非常高的标签索引即可。例如,tabindex="500"
基本上将对象的 Tab 键顺序移动到页面的末尾。
I did this for a long data entry form with a button thrown in the middle of it. It's not a button people click very often so I didn't want them to accidentally tab to it and press enter. disabled
wouldn't work because it's a button.
我为一个很长的数据输入表单做了这个,中间有一个按钮。它不是人们经常点击的按钮,所以我不希望他们不小心点击它并按 Enter。disabled
不起作用,因为它是一个按钮。
回答by Val
Such hack like "tabIndex=-1" not work for me with Chrome v53.
像“tabIndex=-1”这样的 hack 不适用于 Chrome v53。
This is which works for chrome, and most browsers:
这适用于 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>
回答by Nesha Zoric
回答by Yaakov Ainspan
Just add the attribute disabled
to the element (or use jQuery to do it for you). Disabled prevents the input from being focused or selected at all.
只需将属性添加disabled
到元素(或使用 jQuery 为您完成)。禁用可防止输入被聚焦或被选中。