$.keynavigator()箭头向下，使页面向下

$.keynavigator() arrow down, makes page go down

本文关键字：keynavigator      更新时间：2023-09-26

选择建议的代码工作正常。只有一件事很烦人。当向下拉箭头时，文档也会向下，就像在浏览器中一样。但是这会造成混乱，因为页面的重要部分(例如页眉)不再可见。

我相信我也混淆了一些东西，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();
        }
    }
});

:如何防止在发射向下箭头时页面向下移动?

编辑

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

对不起，我以为我已经涵盖了整个问题。

您需要阻止这些键的默认行为。

像这样:

$(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();
     }
});

在此处查看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代码?

相关文章：