jQuery 如何为输入按钮创建键盘快捷键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5061353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a keyboard shortcut for an input button
提问by Ryan Bennett
I am showing a bunch of pictures and each picture has its own HTML page. I have an input button that onclick will take you to the next link for the picture. However, I want to be able to use my keyboard arrows to go forward and back. I am new to coding and don't know if this is possible. Can I do this with HTML using the accesskey:
我展示了一堆图片，每张图片都有自己的 HTML 页面。我有一个输入按钮，onclick 会将您带到图片的下一个链接。但是，我希望能够使用键盘箭头前进和后退。我是编码新手，不知道这是否可能。我可以使用访问键对 HTML 执行此操作吗：
<input type="button" accesskey="?" value="Next Item">
Or do I need to use a JQuery plugin? If so, which one?
还是我需要使用 JQuery 插件？如果有，是哪一个？
采纳答案by Mariano Desanze
As zzzzBovexplained, the HTML accesskeydefines a key that will be trapped only when it is combined with the ALTkey. That is why that is not useful for trapping any key alone.
正如zzzzBov解释的那样，HTMLaccesskey定义了一个键，只有在与ALT键组合时才会被捕获。这就是为什么这对于单独捕获任何键没有用。
But you have to take special care choosing the event to trap the cursor keys because Webkit has decided not to trap them with the keypressevent as it is not in the standard. At this moment the other 3 answers here use this keypressevent and that is why they don't work in Google Chrome nor Safari, but if you change that to keydownthey'll work on all browsers.
但是您必须特别注意选择事件来捕获光标键，因为Webkit 决定不使用keypress事件捕获它们，因为它不在标准中。此时，此处的其他 3 个答案使用此keypress事件，这就是它们在 Google Chrome 或 Safari 中不起作用的原因，但如果您将其更改为keydown它们将在所有浏览器上运行。
You can use this jQuery code to capture the keydownevent of the left, right, up, and downarrow keys:
您可以使用此jQuery代码捕获keydown的事件left，right，up，和down箭头键：
$(window).keydown(function(e) {
switch (e.keyCode) {
case 37: // left arrow key
case 38: // up arrow key
e.preventDefault(); // avoid browser scrolling due to pressed key
// TODO: go to previous image
return;
case 39: // right arrow key
case 40: // up arrow key
e.preventDefault();
// TODO: go to next image
return;
}
});
And in the followingcode snippetyou can see and run a complete example in which images are swapped using the keys or the buttons.
在下面的代码片段中，您可以看到并运行一个完整的示例，其中使用按键或按钮交换图像。
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'
];
function hasPrev() {
return currentImage > 0;
}
function hasNext() {
return currentImage < imagesArray.length - 1;
}
function goToPrev(e) {
e.preventDefault();
if (!hasPrev())
return;
currentImage -= 1;
updateScreen();
}
function goToNext(e) {
e.preventDefault();
if (!hasNext())
return;
currentImage += 1;
updateScreen();
}
function updateScreen() {
$('#imgMain').attr('src', imagesArray[currentImage]);
$('#btnPrev').prop('disabled', !hasPrev());
$('#btnNext').prop('disabled', !hasNext());
}
$(document).ready(function() {
updateScreen();
$('#btnPrev').click(goToPrev);
$('#btnNext').click(goToNext);
});
var keyCodes = {
left: 37,
up: 38,
right: 39,
down: 40
};
$(window).keydown(function(e) {
switch (e.keyCode) {
case keyCodes.left:
case keyCodes.up:
goToPrev(e);
return;
case keyCodes.right:
case keyCodes.down:
goToNext(e);
return;
}
});button:enabled kbd {
color: green;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnPrev">
Previous Image
<br/>
<small>(arrow keys: <kbd>left</kbd> or <kbd>up</kbd>)</small>
</button>
<button id="btnNext">
Next Image
<br/>
<small>(arrow keys: <kbd>right</kbd> or <kbd>down</kbd>)</small>
</button>
<br/>
<img id="imgMain" src="">UPDATE (May 2016)
更新（2016 年 5 月）
keyCodehas recently been deprecated (but I haven't found a cross-browser solution yet). Quoting MDN article for keyCode:
keyCode最近已被弃用（但我还没有找到跨浏览器的解决方案）。引用keyCode 的 MDN 文章：
Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
...
This shouldn't be used by new web applications. IE and Firefox already (partially) support KeyboardEvent.key. Also, Google Chrome and Safari support KeyboardEvent.keyIdentifier which is defined in the old draft of DOM Level 3 Events. If you can use them or one of them, you should use them/it as far as possible.
已弃用
此功能已从 Web 标准中删除。虽然一些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或 Web 应用程序可能随时中断。
...
这不应该被新的 Web 应用程序使用。IE 和 Firefox 已经（部分）支持 KeyboardEvent.key。此外，Google Chrome 和 Safari 支持 KeyboardEvent.keyIdentifier，它是在旧的 DOM Level 3 Events 草案中定义的。如果您可以使用它们或其中之一，则应尽可能使用它们/它。
回答by babygreat
I just used a third party shortcut.js. It's very friendly. You can referenceit.
我只是使用了第三方快捷方式.js。它非常友好。你可以参考一下。
<script type="text/javascript" src="js/shortcut.js"></script>
<script>
shortcut.add("alt+s", function() {
// Do something
});
shortcut.add("ctrl+enter", function() {
// Do something
});
</script>
回答by zzzzBov
Can I do this with HTML using the accesskey:
我可以使用访问键对 HTML 执行此操作吗：
No, accesskey is used in conjunction with alt
不，accesskey 与 alt
So accesskey="a"will make Alt+Abe the shortcut.
所以accesskey="a"将 make Alt+A成为捷径。
Or do I need to use a jQuery plugin?
还是我需要使用 jQuery 插件？
No, you can use regular old javascript; jQuery works too.
不，您可以使用常规的旧 javascript；jQuery 也有效。
$(window).keypress(function(e){
var code = e.which || e.keyCode;
switch ( code )
{
case 43:
//do stuff
return false;
default:
break;
}
});
回答by PutihTua
I will use this :
我会用这个：
<input type="button" accesskey="n" value="Next Item">
And the user should type : shift + alt + n
用户应该输入：shift + alt + n
回答by Milan Jaric
I did example in jsFiddleit uses arrow key up and down so it focuses next or previous input control respectively . Take a look
我在jsFiddle 中做了例子，它使用向上和向下箭头键，因此它分别关注下一个或上一个输入控件。看一看
