如何實現類似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的熱鍵

回答

相關問題