如何通过tab / down使div可导航？

Question

在这个示例中，我输入java，然后按Tab键/向下键，我可以开始导航结果。它也很明智，因为我可以选择文本并打开learn more链接。

我想做这样的自动提示。 如何使键盘可以导航为：

1. tab / down from textbox移至第一个元素
2. 从元素向下/向下移动到下一个元素
3. 向上反转1.和2.，您可以从元素移动到文本框

---

我尝试将tabindex设置为一堆元素。我可以选择它们，一旦选中，我只能按标签浏览 （在Firefox中），无需向上或向下，更不用说回到文本框了。

<textarea tabindex=1>something</textarea>
<ul>
<li tabindex=1>one item <a href="google.com">and link</a></li>
<li tabindex=1>one item</li>
<li tabindex=1 >one item</li>
</ul>

我还需要在HTML中连续布局所有内容，而我通常会将popovers添加为正文的最后一个元素并绝对定位它们。

我猜StackOverflow网站必须处理标签，向上和向下键并计算哪一个得到焦点; tabindex似乎有点限制。

Answer 1

您的问题是您的tabindexes都是相同的值。您需要按照您希望它们选项卡的顺序对它们进行增量处理。

<textarea tabindex="1">something</textarea>
<ul>
<li tabindex="2">one item <a href="google.com">and link</a></li>
<li tabindex="3">one item</li>
<li tabindex="4">one item</li>
</ul>

这假设您正在使用HTML5。