Html CSS中的tabindex

tabindex in CSS

提问by Boris Hamanov

Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?

是否可以使用 CSS 控制 tabindex，如果是，哪些浏览器支持它以及哪些元素？

EDIT

编辑

I should say, my goal is to catch keydown events on a div. I saw this page http://www.quirksmode.org/js/events/keys.html#that tests keyboard events and it shows that the only way keydown fires on anything other than document and body or some kind of form element or link is to have tabindex declared on it. But I read on W3C site:

我应该说，我的目标是在 div 上捕获 keydown 事件。我看到这个页面http://www.quirksmode.org/js/events/keys.html#测试键盘事件，它表明 keydown 触发除文档和正文或某种表单元素或链接以外的任何东西的唯一方法是在其上声明 tabindex 。但我在 W3C 网站上读到：

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

以下元素支持 tabindex 属性：A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA。

So I am a little confused, what to do in order to be standarts compliant and make my use case work?

所以我有点困惑，该怎么做才能符合标准并使我的用例工作？

EDIT2

编辑2

My whole use case is a div with a lot of content with an artificial scroll bar. I am able to scroll it with mouse events but no luck with the keyboard so far.

我的整个用例是一个包含大量内容和人工滚动条的 div。我可以用鼠标事件滚动它，但到目前为止键盘没有运气。

回答by filip

Update 2017

2017 年更新

As pointed out by @Wallop in the comments, the nav-indexproperty was dropped from the specin 2015 due to "lack of implementation interest".

正如@Wallop 在评论中指出的那样，由于“缺乏实施兴趣” ，该nav-index属性在 2015 年从规范中删除。

---

---

Take a look at the nav-indexproperty introduced by W3C in CSS3-UI.

看看nav-indexW3C 在CSS3-UI 中引入的属性。

This property has exactly the same behavior as a tabindexand is applicable to any element.

此属性与 a 具有完全相同的行为，tabindex并且适用于任何元素。

The ‘nav-index' property is an input-method-neutral way of specifying the sequential navigation order (also known as "tabbing order"). This property is a replacement for the HTML4/XHTML1 attribute ‘tabindex'

'nav-index' 属性是一种指定顺序导航顺序（也称为“跳位顺序”）的输入方法中立方式。此属性是 HTML4/XHTML1 属性“tabindex”的替代品

Being probably the best standards-compliant solution for the use case, nav-indexis interpreted only by Opera so far (as of June 2012) and is also marked as "Feature at risk" by W3C, therefore may be dropped any time.

作为用例的最佳符合标准的解决方案，nav-index到目前为止（截至 2012 年 6 月）仅由 Opera 解释，并且也被 W3C 标记为“有风险的功能”，因此可能随时被删除。

Alternative cross-browser solutions are:

替代的跨浏览器解决方案是：

• non-standards-compliant: set the tabindexattribute on a DIV. This will work in all common browsers.

• standards-compliant: replace DIVby an anchor element (A) without a hrefattribute set, style it with display: blockand add the tabindexattribute.

• 不符合标准：tabindex在DIV. 这将适用于所有常见的浏览器。

• 符合标准：替换DIV为A没有href属性集的锚元素 ( )，设置样式display: block并添加tabindex属性。

With respect to BoltClock′s point, I agree that the tabbing order is very logical (both the text selection order and tabbing order are closely related to the sequence in which elements are aranged in the document). On the other hand, CSS has a wider purpose today. It can manipulate not just the content of a document (contentproperty) but also the behavior when and if events are to be fired: i.e. using pointer-events, displayor z-indexthe pointer event's order will change. If these are very basic CSS properties, why you should not be able to influence KeyBoardEvents, too?

关于 BoltClock 的观点，我同意 Tab 顺序是非常合乎逻辑的（文本选择顺序和 Tab 顺序都与文档中元素的排列顺序密切相关）。另一方面，CSS 今天有更广泛的用途。它不仅可以操作文档（content属性）的内容，还可以操作触发事件时和是否触发的行为：即使用pointer-events，display否则z-index指针事件的顺序将改变。如果这些是非常基本的 CSS 属性，为什么您也不能影响 KeyBoardEvents？

回答by Noitidart

This is a bit old but now there are css options like -moz-user-focus. I'm sure there is a webkit equivalent.

这有点旧，但现在有像 -moz-user-focus 这样的 css 选项。我确定有一个 webkit 等价物。

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

user-focusis the standard cross browser attribute.

user-focus是标准的跨浏览器属性。