Tabkey导航HTML

时间:2016-09-14 15:04:39

标签: javascript html html5

所以我有3个按钮:“取消”,“上一个”。和“下一步”,有没有办法将标签导航限制为这3个按钮。所需的标签键循环:Next->Prev->Cancel->Next->... 任何想法如何实现这一目标?

编辑: 我必须通过tabindex="-1"的标签顺序导航来装饰我不想访问的每个元素吗?如果我有很多不希望以这种方式访问​​的元素怎么办?

编辑2:下面描述的答案使标签键跳过浏览器的地址栏,因此对我来说这不是一个好的解决方案。

2 个答案:

答案 0 :(得分:2)

tabindex值表示该元素应该是可聚焦的,但不应通过顺序键盘导航访问;

<button tabindex="1">Next</button>
<button tabindex="3">Prev</button>
<button tabindex="2">Cancel</button>

<button tabindex="-1">Other</button>

答案 1 :(得分:-1)

我认为使用带负值的tabindex应该可以解决问题。 https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute

编辑: 是的,它确实:https://jsfiddle.net/Lgmxmsfm/
至少在我的Chrome上。

<a tabindex="1" href="#">first</a><br/>
<a tabindex="3" href="#">third</a><br/>
<a tabindex="-3" href="#">nope</a><br/>
<a tabindex="2" href="#">second</a>