是否可以使用CSS控制tabindex,如果是,哪些浏览器支持它以及哪些元素?
修改
我应该说,我的目标是在div上捕获keydown事件。我看到这个页面http://www.quirksmode.org/js/events/keys.html#测试键盘事件,它表明keydown触发除文档和正文以外的任何东西或某种表单元素或链接的唯一方法是在其上声明tabindex。但我在W3C网站上看到了:
以下元素支持 tabindex属性:A,AREA,BUTTON, INPUT,OBJECT,SELECT和TEXTAREA。
所以我有点困惑,为了使标准符合标准并使我的用例有用,该怎么做?
EDIT2
我的整个用例是一个带有大量内容的div,带有一个人工滚动条。我可以用鼠标事件滚动它,但到目前为止没有运气键盘。
答案 0 :(得分:27)
2017年更新
正如@Wallop在评论中指出的那样,由于“缺乏实施兴趣”,2015年nav-index
属性为dropped from the spec。
在CSS3-UI中查看W3C引入的nav-index
属性。
此属性与tabindex
具有完全相同的行为,适用于任何元素。
'nav-index'属性是一种指定顺序导航顺序(也称为“制表顺序”)的输入方法中立方式。 此属性替代HTML4 / XHTML1属性'tabindex'
可能是用例的最佳标准兼容解决方案,nav-index
目前仅由Opera解释(截至2012年6月),并且也被W3C标记为“风险特征”,因此可能是随时都放弃了。
其他跨浏览器解决方案包括:
不符合标准:在tabindex
上设置DIV
属性。这适用于所有常见浏览器。
符合标准:将DIV
替换为锚元素(A
)而不设置href
属性,使用display: block
设置样式并添加{{ 1}}属性。
关于BoltClock的观点,我同意标签顺序是非常合理的(文本选择顺序和标签顺序都与文档中元素排列的顺序密切相关)。另一方面,CSS今天有更广泛的用途。它不仅可以操作文档的内容(tabindex
属性),还可以操作触发事件的行为:即使用content
,pointer-events
或display
指针事件的顺序会改变。如果这些是非常基本的CSS属性,为什么你也不能影响KeyBoardEvents呢?
答案 1 :(得分:7)
这有点旧,但现在有像-moz-user-focus这样的css选项。我确信有一个webkit等价物。
https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus