Question

我希望在聚焦文本输入时使用箭头键滚动HTML页面。使用以下代码创建对输入字段的关注：

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

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

使用Javascript可以使输入文本字段处于活动状态并允许同时使用箭头键滚动吗？

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

Answer 1

我不明白为什么不 - 你可以简单地为一个键添加一个事件处理程序并使用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

Answer 2

一点技巧问题，你必须在输入上禁用自动完成功能：

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

然后绑定事件处理程序等：

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

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

2 个答案: