元素未獲得關注Javascript

Question

我有一個列表，其結構如下所示

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

當焦點在hello上時，我按下鍵時焦點應移到hi。 我通過設置焦點以編程方式進行此操作。 我在列表上設置了一個監聽器，用於跟蹤關鍵事件

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

但重點仍然是問候。 在調試時，我看到下一個元素（li標簽）的tabindex = -1 ，這應該不是問題，因為仍然可以通過編程設置焦點。 我能夠將重點放在下一個元素上的唯一方法是更改tabindex =0但這在技術上不是必需的。

我已經寫了這個JSFIDLE ，在這里您可以看到在加載時我嘗試將焦點設置為id = 6，但是它沒有得到焦點。 但是，嘗試將id更改為1並加載。 新的要素得到關注。

Answer 1

您需要在任何可以聚焦的元素上設置一個tabindex 。

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