【问题标题】:Robust keyboard shortcut handling using JavaScript使用 JavaScript 进行强大的键盘快捷键处理
【发布时间】:2010-10-11 07:29:30
【问题描述】:

使用 JavaScript 为 Web 应用程序创建全局键盘快捷键处理程序的最可靠方法是什么,即我应该处理哪些事件以及事件处理程序应该附加到什么?

我想要类似于 Gmail 中的系统的东西,它既可以处理单个按键快捷方式,也可以处理带有修饰键的快捷方式,例如Ctrl + B 等。代码必须在 IE 6 以及现代浏览器中运行。

我有可用的原型框架,但没有 jQuery,所以请不要使用 jQuery 特定的答案!

【问题讨论】:

标签: javascript prototypejs


【解决方案1】:

还有一个名为jwerty的新JavaScript库,它易于使用且不依赖于jQuery。

【讨论】:

    【解决方案2】:

    只是想我会再加入一个。我最近发布了一个名为 Mousetrap 的库。查看http://craig.is/killing/mice

    【讨论】:

      【解决方案3】:

      JimmyP 将此作为评论发布,但它值得作为投票的答案。

      http://www.openjs.com/scripts/events/keyboard_shortcuts/

      【讨论】:

      • 我知道,这就是为什么我问他为什么他没有发布它作为答案。赞成。
      • 我知道,这就是我将其发布为答案的原因。 ;) 我发布了它的社区 wiki,因为这不是我要赚取的积分。
      【解决方案4】:

      LivePipe 控件包中提供的 HotKey 库可与 Prototype 配合使用,并且与 IE 兼容。

      http://livepipe.net/extra/hotkey

      【讨论】:

      • 我会接受你的回答,因为这看起来正是我正在寻找的东西,而且该网站上还有很多其他有趣的东西,所以谢谢!
      • 请注意,如果按下未指定的修饰符,HotKey 显然会接受组合(例如,指定 ctrl + a,按下 ctrl + shift + a,检测到 ctrl + a)。
      • 如果检测到 OS X 并将 ctrl 替换为 cmd/meta 也很好。
      【解决方案5】:

      我要做的是将 onKeyUp 事件附加到 document.body。然后,在这个事件处理程序中,我将使用Element.fire 方法来触发一个自定义事件。虽然此步骤是可选的,但它有助于将事件处理程序与要执行的操作分离,并且您可以使用与按钮单击事件相同的自定义事件处理程序。

      $(document.body).observe("keyup", function() {
          if(/* key + modifier match */) {
              $(document.body).fire("myapp:mycoolevent");
          }
      });
      
      $(document.body).observe("myapp:mycoolevent", function() {
          // Handle event.
      });
      

      稍后,将相同的事件绑定到按钮点击:

      $(button).observe("click", function() {
          $(document.body).fire("myapp:mycoolevent");
      });
      

      就处理修饰键而言,请查看this resource(很旧,但看起来仍然适用)以获得更多帮助。

      【讨论】:

      • Keyup 似乎有问题。至少在 OS X 上(但我相信在 Windows 和大多数 Linux WM 上也是如此),大多数键命令在 keydown 时激活。这种期望(通过适当的检查)也对快捷键强制执行某些期望:修饰键必须是第一个,每个快捷键只有一个可打印键。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-05
      • 1970-01-01
      • 2014-05-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多