Dom監聽組合按鍵
有些時候，我們需要在網頁上，增加一些快捷按鍵，方便用戶使用一些常用的操作，比如：保存，撤銷，復制、粘貼等等。
下面簡單梳理一下思路：
我們所熟悉的按鍵有這麽集中類型：
- 單獨的按鍵操作，如：delete、up、down等
- 兩位組合建，如：ctrl（cmd）+ 其他按鍵，alt+其他按鍵，shift+其他按鍵
- 三位組合鍵，如：ctrl（cmd）+ shift + 其他按鍵，Ctrl（cmd）+ alt + 其他按鍵
大概只有這麽幾種情況了，至少我沒有見過其他的情況。如果確實存在的話，基本實現的原理也比較類似，本文就不再贅述了。
上面這三種情況， 都要處理的一個關鍵問題是阻止默認行為：比如刪除按鍵，保存網頁按鍵，保存書簽等等，這些網頁上的默認行為都需要阻止掉。另外一個就是監聽按鍵，然後根據自己的需求，處理相應的事件。
基於上面提到的需要做的兩件事，我們結合代碼詳細理解一下。
我們寫一個簡單的例子：
| 1 2 3 |
document.onkeydown = function(e) {
console.log(e);
|
這個頁面，在我們按鍵的時候會執行這個方法，以a按鍵為例，會打印一下結果：
這個事件有很多的屬性和方法，這裏我們不會一一進行說明，只是挑出來我們比較感興趣的幾個進行說明。
對照上面提到需要處理的兩件事：
第一阻止默認事件，在W3C標準和IE下，處理方式不太一致。分別是執行e.preventDefault()方法和將e.returnValue = false屬性。當然如果你使用的jquery等類庫的話，只需要寫一個e.preventDefault()就可以了，它幫你做到了兼容。
第二監聽按鍵類型，按鍵分兩種情況，一種是單獨按鍵（只有一個鍵），一種是組合鍵（兩個以上按鍵）。單獨按鍵需要監聽事件的keyCode、charCode和which屬性。
這張表介紹的比較詳細，出自《JavaScript Madness不同的瀏覽器的keycode比較》
當然使用了jquery也不用擔心兼容問題了，直接使用e.keyCode即可。那怎麽知道用戶使用了組合鍵呢？
我們看到事件還有這麽幾個屬性：ctrlKey（metaKey）、altKey、shiftKey，當你同時按下組合鍵的時候，這幾個屬性會變成true，所以組合鍵就可以通過監聽按鍵code和這幾個屬性的狀態進行判斷了。
舉一個簡單的例子，監聽ctrl（cmd）+ s事件：
| 1 2 3 4 5 6 7 8 9 |
document.onkeydown = function(e) {
var keyCode = e.keyCode || e.which || e.charCode;
var ctrlKey = e.ctrlKey || e.metaKey;
if(ctrlKey && keyCode == 83) {
alert(‘save‘);
}
e.preventDefault();
return false;
}
|
JS監聽組合按鍵的原理基本上就是這個樣子了，但是發現了一些問題，比如說：ctrl（cmd）+ w（n、q）等chrome瀏覽器快捷鍵無法進行阻止，這個不知道有沒有方式進行阻止。個人猜測可能需要更高的權限才能做這件事。
介紹了原理之後，有什麽更好的幹貨要介紹的嗎？這個當然沒有了。。。
這怎麽可能，google是那麽的強大，只有想不到沒有做不到。只要你想用的，這裏都有的。我在網上找到這麽一個JS感覺用起來還是比較方便的。它就是shortcuts.js，官網地址。還有一個jquery版本的，github地址。
shortcuts.js支持單獨按鍵和組合按鍵，同時可以通過配置是組合按鍵在輸入框內失效。
它的使用方式是：
| 1 2 3 4 5 6 7 8 |
shortcut("[",function() {
alert("Hi there!");
}, {
‘type‘:‘keydown‘, //事件
‘propagate‘:false, //是否支持冒泡
‘disable_in_input‘:true, //是否在輸入框內有效
‘target‘:document, //作用範圍
});
|
可以通過在源碼中擴展特殊按鍵，是組合按鍵更豐富。
如果想了解更多的信息，可以自己嘗試一下~
Dom監聽組合按鍵