Элемент не принимает фокус Javascript

Question

У меня есть список, структура которого выглядит следующим образом

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

Когда фокус находится на привет и жму KeyDown фокус должен перейти к привет. Я делаю это программно, устанавливая фокус. У меня есть набор слушателя из списка, который отслеживать ключевые события

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

, но в центре внимания остается на привет. При отладке я увидел, что следующий элемент (тег li) имел tabindex = -1, который не должен быть проблемой, поскольку фокус все еще может быть установлен программно. Единственным способом, с помощью которого я мог сосредоточиться на следующем элементе, было изменение tabindex =0, но это технически не требуется.

Я написал это JSFIDLE, где вы можете видеть, что при загрузке я пытаюсь установить фокус на id = 6, но он не получает фокуса. Но попробуйте изменить id на 1 и загрузить. Новый элемент получает фокус.

Answer 1

Вам необходимо установить tabindex на 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>