Question

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

现在要通过键盘支持更复杂的导航，我想在gmail中实现“多键”热键，例如按 g （对于'go'），然后按 i （对于“收件箱”）会将您带到收件箱。

有没有人知道该任务的javascript组件（jquery插件或类似）？或者，实施此类热键的好方法是什么？

Answer 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）

Answer 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;
}

Answer 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 时取消绑定。

Answer 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或者分叉并贡献。

如何实现类似gmail的热键

4 个答案: