javascript - 在网站上使用键盘进行简单且正确的导航方式？

Question

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

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

谢谢!

Answer 1

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

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

但在某些情况下，您可能希望将事件绑定(bind)到特定键。但我建议你使用 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 是一个无符号整数，编码是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);
}

这会向左滚动一页。

我相信您将能够以此为基础构建您的代码。