list - 关注ul列表

Question

我为我的网站开发了一个自定义搜索，并将结果显示在一个带有 div 的 ul 列表中。我的问题是我希望这些结果具有焦点，以便我可以使用箭头键浏览它们。这可能吗？如果是怎么回事？谢谢！

结果

Answer 1

您可以使用该tabindex属性使元素具有焦点。

jsFiddle

<ul>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
</ul>

启用箭头键将是处理keydown和转到下一个选项卡索引的问题。

JavaScript 的开始

window.onkeydown = function(e) {
    e = e || event;
    switch (e.keyCode) {
        case 37: alert('left');
        case 38: alert('up'); 
            // http://stackoverflow.com/a/7208662/1156119
            break;
        case 39: alert('right'); 
        case 40: alert('down');
            // http://stackoverflow.com/a/7208662/1156119
            break;
    }
}