CSS中的tabindex

Question

CSS中的tabindex

63

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

编辑

我想说，我的目标是在div上捕获keydown事件。我看到了这个页面http://www.quirksmode.org/js/events/keys.html#测试键盘事件，并且显示除了在文档和body或某种表单元素或链接之外，只有在它上声明了tabindex时，keydown才会触发任何其他东西。但我在W3C网站上读到：

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

所以我有点困惑，为了符合标准并使我的用例起作用，该怎么办呢？

EDIT2

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

- Boris Hamanov

1

在 div 上捕获键盘事件不是您的用例，而是您尝试回答用例的实现细节。请以不同的方式回答它。（因为您没有告诉我们真正的用例，所以我们无法给出太多建议）。 - Quentin

2个回答

6

这是一个有点旧的内容，但现在有像 -moz-user-focus 这样的 css 选项。我相信 webkit 也有类似的选项。 user-focus 是标准的跨浏览器属性。 https://developer.mozilla.org/zh-CN/docs/CSS/-moz-user-focus

- Noitidart

7

我刚刚遇到了和这个用户一样的问题，我想以用户提问的方式回答它。这些stackoverflow话题在Bing和Google上都很常见，所以我想在这里添加答案。 - Noitidart

1

@SamB 在你的元素上设置-moz-user-focus: none 或 -moz-user-focus: -moz-none 或 user-focus: none。user-focus 是标准化方法。 - Noitidart

它支持设置焦点的特定索引吗？我在规范中没有看到任何相关内容，也许它的tab索引将由其在dom中的位置确定。 - miir

1

这个解决方案根本没有回答问题，因为-moz-user-focus只控制元素是否可聚焦，而不是它的标签顺序，这才是问题所在。 - Robert Kusznier

3

@Noitidart，您能否提供证据证明user-focus是一个标准吗？我找不到支持您的说法的文档。 - roydukkey

显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- filip · Accepted Answer

2017更新

正如@Wallop在评论中指出的那样，由于“实现兴趣不高”，nav-index属性在2015年被规范中删除。

看一下W3C在CSS3-UI中引入的nav-index属性。

该属性与tabindex完全相同，并适用于任何元素。

“nav-index”属性是一种输入法中性的方式，用于指定顺序导航顺序（也称为“制表顺序”）。该属性是HTML4 / XHTML1属性“tabindex”的替代品

nav-index可能是最好符合标准的解决方案，但截至2012年6月，它只被Opera解释，并被W3C标记为“风险特性”，因此随时可能被删除。

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

非标准兼容：在
上设置tabindex属性。这将在所有常见的浏览器中起作用。
标准兼容：通过不设置href属性的锚元素（）替换
，使用display: block对其进行样式设置，并添加tabindex属性。

关于BoltClock的观点，我认为选项卡顺序非常合理（文本选择顺序和选项卡顺序与元素在文档中排列的顺序密切相关）。另一方面，CSS今天具有更广泛的用途。它不仅可以操作文档的内容（content属性），而且还可以在事件何时以及是否触发时控制行为：即使用pointer-events、display或z-index，指针事件的顺序将会改变。如果这些都是非常基本的CSS属性，为什么你不能影响键盘事件呢？