[英]Robust keyboard shortcut handling using JavaScript
What's the most robust way of creating a global keyboard shortcut handler for a Web application using JavaScript ie which event(s) should I handle and what should the event handler(s) be attached to?使用 JavaScript 为 Web 应用程序创建全局键盘快捷方式处理程序的最可靠方法是什么,即我应该处理哪些事件以及事件处理程序应该附加到什么?
I want something like the system in Gmail which can handle both single keypress shortcuts and also shortcuts with modifier keys eg Ctrl + B etc. The code has to work in IE 6 as well as modern browsers.我想要类似 Gmail 中的系统的东西,它可以处理单个按键快捷方式和带有修改键的快捷方式,例如 Ctrl + B 等。代码必须在 IE 6 和现代浏览器中工作。
I have the Prototype framework available to use but not jQuery, so please, no jQuery-specific answers!我有可用的 Prototype 框架但不是 jQuery,所以请不要提供特定于 jQuery 的答案!
Just thought I'd throw another into the mix.只是想我会再加入一个。 I recently released a library called Mousetrap.
我最近发布了一个名为 Mousetrap 的库。 Check it out at http://craig.is/killing/mice
查看http://craig.is/killing/mice
The HotKey library available in the LivePipe controls package works with Prototype and is IE compatible. LivePipe 控件中可用的 HotKey 库 package 可与 Prototype 一起使用,并且与 IE 兼容。
http://livepipe.net/extra/hotkey http://livepipe.net/extra/hotkey
JimmyP posted this as a comment, but it deserves to be an answer for voting purposes. JimmyP 将此作为评论发布,但它应该作为投票目的的答案。
http://www.openjs.com/scripts/events/keyboard_shortcuts/ http://www.openjs.com/scripts/events/keyboard_shortcuts/
What I would do is attach onKeyUp events to the document.body.我要做的是将 onKeyUp 事件附加到 document.body。 Then, in this event handler, I would use the Element.fire method to fire a custom event.
然后,在这个事件处理程序中,我将使用Element.fire方法来触发一个自定义事件。 Though this step is optional, it will help in decoupling the event handler from the action to be performed, and you can use the same custom-event handler from say an button click event.
尽管此步骤是可选的,但它有助于将事件处理程序与要执行的操作分离,并且您可以使用与按钮单击事件相同的自定义事件处理程序。
$(document.body).observe("keyup", function() {
if(/* key + modifier match */) {
$(document.body).fire("myapp:mycoolevent");
}
});
$(document.body).observe("myapp:mycoolevent", function() {
// Handle event.
});
Later, to bind the same event to a button click:稍后,要将相同的事件绑定到按钮单击:
$(button).observe("click", function() {
$(document.body).fire("myapp:mycoolevent");
});
As far as handling modifier keys is concerned, check out this resource (very old, but still looks applicable) for more help.就处理修饰键而言,请查看此资源(非常旧,但看起来仍然适用)以获得更多帮助。
I recommend having a look at Keystrokes .我建议看看Keystrokes 。 It makes this sort of thing extremely easy.
它使这种事情变得非常容易。
import { bindKey, bindKeyCombo } from '@rwh/keystrokes'
bindKey('a', () =>
console.log('You\'re pressing "a"'))
bindKeyCombo('ctrl > y, r', () =>
console.log('You pressed "ctrl" then "y", released both, and are pressing "r"'))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.