Question

我最近制作了一个基本的html / css galery实际上是一个带有下一个/上一个按钮的表。我想让它对键盘做出响应。就像任何人按下键盘上的“左”按钮一样，它应该继续上一张照片，如果它点击“右”按钮，请转到下一页。我很乐意，如果你能用尽可能少的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();
    }
});

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

CSS画廊对键盘做出反应

2 个答案: