如何实现类似 gmail 的热键答案

【问题标题】：How to implement gmail-like hotkeys如何实现类似 gmail 的热键
【发布时间】：2012-03-14 00:47:34
【问题描述】：

我想在 Web 应用程序中实现键盘热键。到目前为止，我一直在使用jquery.hotkeys plugin，它允许我实现简单的热键（例如，像 a 这样的单次击键）。

现在为了支持通过键盘进行一些更复杂的导航，我想在 gmail 中实现“多键”热键，例如按 g（表示“go”），然后i（代表“收件箱”）带您进入收件箱。

有谁知道用于该任务的 javascript 组件（jquery 插件或类似插件）？或者什么是实现此类热键的好方法？

【问题讨论】：

标签： javascript hotkeys

【解决方案1】：

使用keymaster 和keymaster-sequence 插件有一个更好的解决方案。

来源在这里keymaster.js和这里keymaster.sequence.js

像这样使用它们：

<script type="text/javascript" src="https://raw.github.com/madrobby/keymaster/master/keymaster.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/chevalric/keymaster-sequence/master/keymaster.sequence.min.js"></script>
<script>
key.sequence(["g","i"], function () {
  var el = document.getElementById("result");
  el.innerHTML = "You first pressed 'g', then you pressed 'i'";
});

</script>
<div id="result"></div>

这是一个小演示 http://jsfiddle.net/Nwdyd/1/，它还展示了碰撞处理（绑定 g 以及 g i）

【讨论】：

按原样运行示例，来自 raw.github.com 的 src 链接不再为我工作；但链接的 github 项目使用本地代码。
链接解析正常 - 但是，它们仅用于演示目的，不应不用作 CDN。
也许我搞砸了，但我将其复制/粘贴到我的应用程序中，但它不起作用，当我将内容复制到本地文件时效果很好。
当有另一个元素（在页面中）聚焦时不起作用。签出http://jsfiddle.net/EyNek/

【解决方案2】：

按下 g 时设置一个全局布尔值。然后检查是否在按下 i 时设置。您可以选择在 g 按下时实现超时，以便您有有限的时间在之后按下 i。

var goPressed = false;
function hotkeyPressed (event) {
    if (event.keyCode == KEYCODE_FOR_G) {
        goPressed == true;
        //Optionally:
        setTimeout(clearPresses, 3000);
    }
    if (event.keyCode == KEYCODE_FOR_I && goPressed) {
        gotoInbox();
    }
}

function clearPresses() {
    goPressed = false;
}

【讨论】：

没那么容易。这两个键必须在某个定义的时间内按下，才能形成有效的热键。
这就是我的 clearPresses 函数的用途...如果您在 3000 毫秒内未按 i，则布尔值将设置回 false。
3 秒在按键区是很长的时间。
@Slomojo 不确定它是否适用于一系列键，无论它是否明确可配置/取决于实施者......
我只提到它是因为您和 Spoike 的回答都重复了 3000 毫秒（因为他正在使用您的代码） - 因此，试探性地说，这是一个明智的默认建议。当然它是可配置的，但是我认为值得向未来的读者指出，在按下按键或按钮时，3 秒是相当长的时间。 - 最后，亲爱的读者，做一些用户体验测试并相应地调整它。

【解决方案3】：

您仍然可以通过添加状态和超时来使用该插件，就像Matt Fellows 建议的那样。

var gWasPressed = false;    

var clearKeyState = function() {
    gWasPressed = false;
}

var changeKeyState = function() {
  gWasPressed = true;
  setTimeout(clearKeyState, 3000);
}

$(document).bind('keydown', 'g', changeKeyState);
$(document).bind('keydown', 'i', commandI);

var commandI = function() {
  if (gWasPressed) {
    // go to inbox
    clearKeyState();
  } else {
    // do whatever i was supposed to do if g wasn't pressed
  }
}

另一种解决方案是在按下 g 时重新绑定键，并在超时到期或按下辅助键 i 时解除绑定。

【讨论】：

【解决方案4】：

有一个新版本的 hotKeys.js 可以与 1.10+ 版本的 jQuery 一起使用。它很小，只有 100 行 javascript 文件。 4kb 或仅 2kb 缩小。以下是一些简单的用法示例：

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething);

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse);

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function () {
        doSomethingWithaParameter('Daniel');
    });

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool);

从 github 克隆 repo：https://github.com/realdanielbyrne/HoyKeys.git 或转到 github repo 页面 https://github.com/realdanielbyrne/HoyKeys 或 fork 并贡献。

【讨论】：