在聚焦文本输入的同时使用箭头键滚动(Javascript）

Scroll with arrow keys while text input is focused (Javascript)

本文关键字：滚动 Javascript 文本 聚焦 输入      更新时间：2023-10-10

我想在聚焦文本输入的同时用箭头键滚动HTML页面。输入字段上的焦点是用以下代码创建的：

document.getElementById('search').focus();

我必须保持输入字段处于活动状态，因为我有一个条形码扫描仪，它可以写入该字段。

使用Javascript是否可以激活输入文本字段并允许同时使用箭头键滚动？

我在基于Windows CE 6.0的移动扫描仪上使用IE 6。

我不明白为什么不这样做——你可以简单地向键添加一个事件处理程序，然后使用jquery滚动。

$(document).keydown(function(e){
    if (e.keyCode == 40) {
       // get current scroll
       var scroll = $(window).scrollTop();
       $(window).scrollTop(scroll+10);
       return false;
    } else if (e.keyCode == 38) {
        // get current scroll
       var scroll = $(window).scrollTop();
       $(window).scrollTop(scroll-10);
       return false;
    }
});

何处

37 - left
38 - up
39 - right
40 - down

这是一个技巧问题，你必须在输入上禁用自动完成：

<input id="search" autocomplete="off" />

然后绑定事件处理程序etc:

document.onkeydown = function(event) {
    // normalize event.which
    if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
        event.which = event.charCode != null ? event.charCode : event.keyCode;
    }
    if ( document.activeElement.id === 'search' ) { // #search has focus
        if (event.which === 38) { // up arrow
            window.scrollBy(0, -50);
        }else if (event.which === 40) { // down arrow
            window.scrollBy(0, 50);
        }
    }
}
document.getElementById('search').focus();

请注意，当机身有焦点时，箭头键将默认滚动页面，因此为了测试该功能，您必须聚焦机身以外的其他东西

FIDDLE

相关文章：