Tabkey 导航 HTML答案

【问题标题】：Tabkey navigation HTMLTabkey 导航 HTML
【发布时间】：2016-10-18 17:00:20
【问题描述】：

所以我有 3 个按钮：“取消”、“上一个”。和“下一步”，有没有办法将标签导航仅限于这 3 个按钮。所需的 Tab 键循环：Next->Prev->Cancel->Next->... 任何想法如何实现这一目标？

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

编辑2：下面描述的答案使tab键跳过浏览器的地址栏，所以这对我来说不是一个好的解决方案。

【问题讨论】：

你还有什么？
@G.Stoynev 什么都没有，基本上只有这个按钮的标记和它们上的 tabindex 来设置顺序
类似于这个 SO 问题：stackoverflow.com/questions/5192859/…
这个问题已经回答了吗？
@ksav 没有。我找到了解决方案。 tabintex 没有帮助。

标签： javascript html

【解决方案1】：

负的tabindex 值意味着该元素应该是可聚焦的，但不应通过顺序键盘导航访问；

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

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

【讨论】：

【解决方案2】：

我认为，使用带有负值的 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>

【讨论】：