3

添加使用键盘输入导航网页的选项的最简单且跨浏览器的正确方法是什么？现在正在设计一个非常宽和长的页面，并希望为用户提供仅使用键盘滚动的选项。

可能有些部分的 div 包含在标签中，理想情况下，我希望在按下“左”“右”“上”或“下”键时从一个 div 平滑过渡到另一个 div。

谢谢！

4

1 回答 1

1

首先，在浏览器中，箭头键有默认行为。如果页面比您的页面更长或更宽，他们会滚动页面。

如果你的页面是可滚动的，你不应该真的覆盖箭头键，它们已经工作了。

在某些情况下，您可能希望将事件绑定到特定键。但我建议你使用WASD而不是箭头键。

我将尝试在纯 JavaScript 中执行此操作，因为我不想强迫您使用任何框架，但我也会提供 jQuery 替代方案。

首先，浏览器似乎注册按键的方式有很多种。我正在查看quirksmode.org，这是一个关于浏览器如何处理非标准甚至标准事物的特殊信息源。我经常去那里寻找“最佳实践”。

它告诉我，我可以使用的最好的（最广泛支持的）事件是keydown. 此外，从事件中读取按下的键的最可靠方法是读取event.keyCode. 根据 MDN，这是deprecated，您应该使用key（标记为未实现），但至少event.keyCode在浏览器中始终如一地工作。所以你可以像这样处理按键：

document.onkeydown = function(e) {
    var evt = e || window.event; // for more compatibility
    var keyCode = evt.keyCode;

    console.log(keyCode + " was pressed");

    switch(keyCode) {
        case 37: // left key was pressed
            handleLeft();
            e.preventDefault(); // prevents the default behaviour to trigger
            break;
        case 38: // up key was pressed
            handleUp();
            e.preventDefault();
            break;
        case 39: // right key was pressed
            handleRight();
            e.preventDefault();
            break;
        case 40: // down key was pressed
            handleDown();
            e.preventDefault();
            break;
        default:
            // there are quite a few keycodes left :)
            break;
    }
}

keyCode是一个无符号整数，encodinc 是ASCII或Windows-1252，但这对于普通键是相同的。如果你不确定，那么alert()或者console.log()按下的键，所以你可以检查它的代码。

如果您使用的是 jQuery，则该event.which属性在keydown事件上被规范化，因此您可以像这样使用它：

$('document').keydown(function(event) {
    if (event.which == 37) {
         alert('left key was pressed');
    }
});

现在介绍如何处理导航。如果我理解正确，您想滚动窗口。

window.scroll不是标准的一部分，但在所有地方都受支持。还可以帮助您滚动相对数量window.scollBy。window.scrollByPages

因此，例如，您可以handleLeft()像这样从代码中编写函数：

function handleLeft() {
    window.scrollBy(-1 * window.innerWidth, 0);
}

这将向左滚动一页。

我相信您将能够构建您的代码。

于 2013-05-05T10:46:28.553 回答