Jquery 如何为输入按钮创建键盘快捷键

我展示了一组图片，每张图片都有自己的HTML页面。我有一个输入按钮，onclick会将您带到图片的下一个链接。但是，我希望能够使用我的键盘箭头前进和后退。我是新的编码，不知道这是否是可能的。我可以使用accesskey对HTML执行此操作吗：

<input type="button" accesskey="?" value="Next Item">

或者我需要使用JQuery插件吗？如果是，哪一个

我可以使用accesskey对HTML执行此操作吗：

<input type="button" accesskey="?" value="Next Item">

否，accesskey与alt一起使用

因此，

accesskey=“a”

将使Alt+a成为快捷方式

或者我需要使用jQuery插件吗

不，您可以使用常规的旧javascript；jQuery也可以工作

$(window).keypress(function(e){
  var code = e.which || e.keyCode;
  switch ( code )
  {
    case 43:
      //do stuff
      return false;
    default:
      break;
  }
});

你可以这样做

$(window).keypress(function(event) {
    switch (event.keyCode) {

    case 37:
        prev();
        break;
    case 39:
        next();
        break;

    }
});

.

我做了一个例子，它使用上下箭头键，以便分别聚焦下一个或上一个输入控件。看看

如前所述，HTML

accesskey

定义了一个仅在与ALT键组合时才会被捕获的键。这就是为什么单独捕获任何键都没有用的原因

但是，您必须特别注意选择要捕获光标键的事件，因为。此时，这里的其他3个答案使用了这个

keypress

事件，这就是为什么在Google Chrome和Safari中不起作用的原因，但是如果您将其更改为

keydown

，它们将在所有浏览器上起作用

您可以使用此jQuery代码捕获左、右、上和下箭头键的

keydown

事件：

在下面的代码片段中，您可以看到并运行一个完整的示例，其中使用键或按钮交换图像

var currentImage=0；
var imagesArray=[
'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png',
'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png',
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png'
];
函数hasPrev（）{
返回currentImage>0；
}
函数hasNext（）{
返回currentImage
按钮：已启用kbd{
颜色：绿色；
字体大小：粗体；
}

以前的图像


（箭头键：向左或向上）
下一张图片


（箭头键：向右或向下）


我刚刚使用了第三方。非常友好。你可以做到


快捷方式。添加（“alt+s”，函数（）{
//做点什么
});   
快捷方式。添加（“ctrl+enter”，函数（）{
//做点什么
}); 
我将使用以下方法：

<input type="button" accesskey="n" value="Next Item">



用户应该输入：shift+alt+n
哦，对了，我忘了，keypress实际上是用来确定按下了哪个字母数字键（比如打字，因为它保留了大写的keycode），vs keydown是通用输入（使用小写的keycode，但会检测功能键等）.OP明确表示，他/她希望使用箭头键，而不是
n
或任何其他字母。此外，它似乎对任意元素都不起作用（尽管我不能责怪人们使用js单击处理程序，除了鼠标之外，它对任何输入都不起作用），只是说，如果你使用的是不同的浏览器和笔记本电脑，这是一种不同的快捷方式。您可以在www.w3schools.com/tags/att_global_accesskey.aspGreat package上查看哪一个适合您。仅供参考：您可以通过提供一个带有
target
属性的可选
option
对象来缩小快捷方式的范围，并且可以进行更多的自定义。这应该是可以接受的答案，因为在寻找jQuery插件时，它以最小的工作量准确地回答了问题-
<input type="button" accesskey="n" value="Next Item">