css HTML 库对键盘做出反应

Question

我最近制作了一个基本的 html/css 画廊，它实际上是一个带有下一个/上一个按钮的表格。问题是我想让它响应键盘。就像如果有人点击键盘上的“左”按钮它应该继续上一张照片，如果它点击“右”按钮转到下一页。 如果你能用尽可能少的 javascript/jquery 来实现它，我会很高兴。我在谷歌搜索了类似的东西，但我没有找到！ 如果您需要我网站的任何代码，请告诉我。 请帮忙！

Answer 1

您可以使用.on() 和keydown 事件 捕获键盘交互，并决定在返回值之后做什么：

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    console.log(code)
    if (code == 40) {
        // down arrow pressed : do something
        console.log("down arrow pressed")
    }
});

见JSFIDDLE

导航箭头的键盘映射是

// 37 = left arrow
// 38 = up arrow
// 39 = right arrow
// 40 = down arrow

编辑：为避免过度使用if else if else，您可以使用switch（性能更好），例如：

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    switch (code) {
        case 37:
            console.log("left arrow pressed")
            break;
        case 38:
            console.log("up arrow pressed")
            break;
        case 39:
            console.log("right arrow pressed")
            break;
        case 40:
            console.log("down arrow pressed")
            break;
        default:
            return false
    }
});

查看更新JSFIDDLE

Answer 2

JFK 的回答是正确的，但我扩展了一点

$(document).on("keydown", function (e) {
    var code = e.which || e.keyCode;
    if (code == 40 || code == 39) { // down & right
        // replace selector with your button id/class
        $('.btn-next').click();
    } else if (code == 38 || code == 37) { // up & left
        // replace selector with your button id/class
        $('.btn-previous').click();
    }
});

该代码模拟了对下一个/上一个按钮的点击，因此您可以放置​​在点击或按键一次时应该发生的任何代码。