使用overflow：auto </div> </li>将<li>集中在<div>内

Question

我已经创建了一个搜索功能，您可以使用键盘箭头导航结果。所有结果都会显示在li内的div内，风格为：

overflow:auto; max-height: 100px;

我将第一个li聚焦于此代码：

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

然后div overflow:auto会自动滚动，因此第一个焦点li无法显示...

以下是一个示例：http://jsfiddle.net/CZz9n/1/

Answer 1

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

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

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

jsFiddle