jquery - 将 聚焦在 内并溢出 :auto

Question

我制作了一个搜索功能，您可以使用键盘箭头导航结果。所有结果将显示在 div 内的 li 中，样式为:

overflow:auto; max-height: 100px;

我用以下代码聚焦第一个li:

$('#searchInput').keydown(function(e) {
    if (e.keyCode==40) {
        $('li:first').focus();
    }
});

带有 overflow:auto 的 div 将自动滚动，因此第一个聚焦的 li 将不可见...

这是一个示例:http://jsfiddle.net/CZz9n/1/

Answer 1

向下滚动来自浏览器默认行为，将向下箭头解释为向下滚动的命令。要解决此问题，您只需阻止默认行为即可。

您已经阻止了 li 的 keydown 处理程序中的默认行为，这正是我们所需要的。您使用了 return false，但是 e.preventDefault() is slightly safer .

$('#searchInput').keydown(function(e) {
    if (e.keyCode==40) {
        e.preventDefault(); // add this
        $('li:first').focus();
    }
});

jsFiddle