如何实现类似gmail的热键

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

我们支持通过键盘更复杂些的导航，我想实现“多键”热键例如在Gmail中，例如按克（对于“走出去”），其次是我其中（为'收件箱'）将您带到收件箱。

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

2012-02-23 M4N

使用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）

来源

2013-03-21 23:38:49 ocodo

以raw.github.com的src链接运行示例不再适用于我;但链接的github项目使用本地代码。 – Nate 2013-10-07 20:28:33

链接解析成功 - 但是，它们仅用于演示目的，并且应将** NOT **用作CDN。 – ocodo 2013-10-07 22:51:41

也许我把它搞砸了，但是我把它完全复制/粘贴到我的应用程序中，并且它不起作用，当我将内容复制到本地文件时效果很好。当有另一个元素（在页面中）时， – Nate 2013-10-08 00:23:37

当按下g时，设置全局布尔值。然后检查是否设置为我被按下。您可以选择在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; 
}

来源

2012-02-23 15:32:05

这并不容易。两个键必须在一定的时间内按下，才能形成一个有效的热键。 – M4N 2012-02-23 15:33:57

这就是我的clearPresses函数的用途......如果您在3000毫秒内不按下，布尔值将重新设置为false。 – 2012-02-23 15:41:52

3秒是在关键新闻土地非常长的时间。 – ocodo 2013-03-20 23:13:04

您仍然可以通过添加状态和超时，多为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 
    } 
}

替代的解决方案是当按下克重新绑定密钥，并且当在二次键我按下超时过期或解除绑定它们。

来源

2012-02-23 16:01:13 Spoike

有一个新版本的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回购：https://github.com/realdanielbyrne/HoyKeys.git或到GitHub库页https://github.com/realdanielbyrne/HoyKeys或叉子和贡献。

来源

2014-03-07 16:15:09 realdanielbyrne

如何实现类似gmail的热键

回答

相关问题