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

作者

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

&lt；输入type=“button”accesskey=“？”value=“Next Item”&gt；

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

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

但是，您必须特别注意选择捕捉光标键的事件，因为Webkit决定不使用keypress事件捕捉光标键，因为它不在标准中。此时，这里的其他3个答案使用了这个keypress事件，这就是为什么在Google Chrome和Safari中不起作用的原因，但是如果您将其更改为keydown，它们将在所有浏览器上起作用

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

$（窗口）。向下键（功能（e）{
开关（如钥匙代码）{
案例37://左箭头键
案例38://向上箭头键
e、 preventDefault（）；//避免因按键而导致浏览器滚动
//TODO:转到上一个图像
回来
案例39://右箭头键
案例40://向上箭头键
e、 预防默认值（）；
//TODO:转到下一个图像
回来
}
});

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

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&gt；0；
}
函数hasNext（）{
返回currentImage&lt；imagesArray.length-1；
}
函数goToPrev（e）{
e、 预防默认值（）；
如果（！hasPrev（））
回来
currentImage-=1；
updateScreen（）；
}
函数goToNext（e）{
e、 预防默认值（）；
如果（！hasNext（））
回来
currentImage+=1；
updateScreen（）；
}
函数updateScreen（）{
$（'#imgMain'）.attr（'src'，imagesArray[currentImage]）；
$（'#btnPrev'）.prop（'disabled'，！hasPrev（））；
$（'btnNext'）.prop（'disabled'，！hasNext（））；
}
$（文档）.ready（函数（）{
updateScreen（）；
$（'btnPrev'）。单击（goToPrev）；
$（'btnNext'）。单击（GotonNext）；
});
var密钥码={
左：37，
上升：38，
右：39，
下降：40
};
$（窗口）.keydown（函数（e）{
开关（如钥匙代码）{
case keyCodes.left：
case keyCodes.up：
戈托普列夫（e）；
回来
case keyCodes.right：
case keyCodes.down：
goToNext（e）；
回来
}
});
按钮：启用kbd{
颜色：绿色；
字体大小：粗体；
}
&lt；脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“&gt&lt/脚本&gt；
&lt；按钮id=“btnPrev”&gt；
以前的图像
&lt；br/&gt；
&lt；小型&gt；（箭头键：&lt；kbd&gt；左&lt；/kbd&gt；或&lt；kbd&gt；向上&lt；/kbd&gt；）&lt/小型&gt；
&lt/按钮&gt；
&lt；按钮id=“btnNext”&gt；
下一张图片
&lt；br/&gt；
&lt；小型&gt；（箭头键：&lt；kbd&gt；right&lt；/kbd&gt；或&lt；kbd&gt；down&lt；/kbd&gt；）&lt/小型&gt；
&lt/按钮&gt；
&lt；br/&gt；
&lt；img id=“imgMain”src=”“&gt

更新（2016年5月）

keyCode最近被弃用（但我还没有找到跨浏览器的解决方案）。为keyCode引用MDN文章：

不赞成

此功能已从Web标准中删除。尽管某些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的网页或Web应用程序可能随时中断

这不应该被新的web应用程序使用。IE和Firefox已经（部分）支持KeyboardEvent.key。此外，Google Chrome和Safari支持KeyboardEvent.keyIdentifier，这是在旧的DOM Level 3事件草案中定义的。如果你能使用它们或其中一个，你应该尽可能地使用它们/它

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with