Question

选择建议的代码很好。只有一件烦人的事情。在向下箭头时，文档也会下降， - 就像在浏览器中一样/应该这样做。但这会产生混淆，因为页面的重要部分（例如标题）不再可见。

我相信我混淆了一些东西，jquery keyup和keynavigator，这可能更清晰，也许这就是页面出现问题（？）。

$(document).keyup(function( e ) {
    if(e.which==38 || e.which==40){
            $("#suggesties").focus();
        }
});

$('#suggesties label').keynavigator({ 
    cycle: true,
    activeClass: 'alert-success',
    keys: {
        enter: function($el,e) {
            $el.click();
            $("#initials").focus();
        }
    }
});

问题：当向下箭头被触发时，如何防止页面停止？

修改

问题是光标首先聚焦在一个字段上，该字段产生一个列表，我想用键盘从中选择。因此，向下箭头的第一次点击只会导致离开输入字段，并导致页面向下滚动一点。在第二次击中后，它选择第二个结果。

对不起，我以为我真的涵盖了整个问题。

Answer 1

这些密钥需要prevent the default behaviour。

这样的事情：

$(document).keyup(function( e ) {
    if(e.which==38 || e.which==40){
       e.preventDefault();
       $("#suggesties").focus();
     }
});

为了安全起见，请确保您也阻止onkeydown事件的默认行为（对于这两个键），因为keydown事件通常会触发浏览器滚动：

$(document).keydown(function( e ) {
    if(e.which==38 || e.which==40){
       e.preventDefault();
     }
});

Answer 2

在jsFiddle中查看此示例代码http://jsfiddle.net/5zpeho6b/2/

$(document).keyup(function( e ) {
    if(e.which==38 || e.which==40) {
        console.log('key '+(e.which==38?'up':'down'));
        $("ul#example1").focus();
    }
});

$('ul#example1 li').keynavigator({ 
    cycle: true,
    activeClass: 'alert-success',
    keys: {
        enter: function($el,e) {
            $el.click();
            $("#content").focus();
        }
    }
});

它应该工作，页面不滚动。当焦点位于keynavigator元素上时，我无法重现keydown滚动页面的情况。

您能提供更多信息，例如所有HTML，CSS和JS代码吗？

$ .keynavigator（）向下箭头，使页面向下

2 个答案: