元素没有采取焦点Javascript

Question

我有一个结构如下所示的列表

<ul>
   <li tabindex =0> hello <li>
   <li> hi </li>
   <li> bye </li>
   <li> goodbye </li>
</ul.

当焦点在你好时我按下keydown时焦点应该转到hi。我通过设置焦点以编程方式执行此操作。 我在列表中设置了一个跟踪关键事件的监听器

handleKeyevent (e){
    if(e.item.keyCode == 38){
         document.activeElement.nextElementSibling.focus();
    }
}

但重点仍然是你好。在调试时，我看到下一个元素（li标签）有tabindex = -1，这应该不是问题，因为焦点仍然可以通过编程方式设置。我能够将焦点放在下一个元素上的唯一方法是更改​​tabindex =0，但这在技术上并不是必需的。

我写了这个JSFIDLE你可以看到在加载时我试着将焦点设置在id = 6但是它没有得到焦点。但是尝试将id更改为1并加载。新元素得到了关注。

Answer 1

You need to set a tabindex on any element which could be focused.

<ul>
    <li tabindex="0">hello</li>
    <li tabindex="0">hi</li>
    <li tabindex="0">bye</li>
    <li tabindex="0">goodbye</li>
</ul>