我想在Web應用程序中實現鍵盤熱鍵。到目前爲止,我一直在使用jquery.hotkeys plugin,它允許我實現簡單的熱鍵(例如,單擊鍵,如a)。如何實現類似gmail的熱鍵
我們支持通過鍵盤更復雜些的導航,我想實現「多鍵」熱鍵例如在Gmail中,例如按克(對於「走出去」),其次是我其中(爲'收件箱')將您帶到收件箱。
有沒有人知道該任務的JavaScript組件(jquery插件或類似)?或者什麼是實施這種熱鍵的好方法?
我想在Web應用程序中實現鍵盤熱鍵。到目前爲止,我一直在使用jquery.hotkeys plugin,它允許我實現簡單的熱鍵(例如,單擊鍵,如a)。如何實現類似gmail的熱鍵
我們支持通過鍵盤更復雜些的導航,我想實現「多鍵」熱鍵例如在Gmail中,例如按克(對於「走出去」),其次是我其中(爲'收件箱')將您帶到收件箱。
有沒有人知道該任務的JavaScript組件(jquery插件或類似)?或者什麼是實施這種熱鍵的好方法?
使用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
)
當按下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;
}
您仍然可以通過添加狀態和超時,多爲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
}
}
替代的解決方案是當按下克重新綁定密鑰,並且當在二次鍵我按下超時過期或解除綁定它們。
有一個新版本的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或叉子和貢獻。
以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