我們都知道，JS監聽鍵盤事件，如下：

document.onkeydown = function(event) {
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if (e && e.keyCode == 27) {
		alert("按 Esc")
	}
	if (e && e.keyCode == 32) {
		alert("按空格")
	}
	if (e && e.keyCode == 13) {
		alert("按回車")
	}
};

有些時候，我們需要在網頁上，使用javascript增加一些快捷按鍵，方便用戶使用一些常用的操作，比如：保存，撤銷，復制、粘貼等等。

下面簡單梳理一下思路：

我們所熟悉的按鍵有這么集中類型：

單獨的按鍵操作，如：delete、up、down等

兩位組合建，如：ctrl（cmd）+ 其他按鍵，alt+其他按鍵，shift+其他按鍵

三位組合鍵，如：ctrl（cmd）+ shift + 其他按鍵，Ctrl（cmd）+ alt + 其他按鍵

大概只有這么幾種情況了，至少我沒有見過其他的情況。如果確實存在的話，基本實現的原理也比較類似，本文就不再贅述了。

上面這三種情況， 都要處理的一個關鍵問題是阻止默認行為：比如刪除按鍵，保存網頁按鍵，保存書簽等等，這些網頁上的默認行為都需要阻止掉。另外一個就是監聽按鍵，然后根據自己的需求，處理相應的事件。

基于上面提到的需要做的兩件事，我們結合代碼詳細理解一下。

我們寫一個簡單的例子：

document.onkeydown = function(e) {
    console.log(e);
}

這個事件有很多的屬性和方法，這里我們不會一一進行說明，只是挑出來我們比較感興趣的幾個進行說明。

對照上面提到需要處理的兩件事：

第一阻止默認事件，在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事件：

document.onkeydown = function(e) {
        var keyCode = e.keyCode || e.which || e.charCode;
        var ctrlKey = e.ctrlKey || e.metaKey;
        if(ctrlKey && keyCode == 83) {
            alert('按住了 CTRL+S');
        }
        e.preventDefault();
        return false;
}

JS監聽組合按鍵的原理基本上就是這個樣子了，但是發現了一些問題，比如說：ctrl（cmd）+ w（n、q）等chrome瀏覽器快捷鍵無法進行阻止，這個不知道有沒有方式進行阻止。個人猜測可能需要更高的權限才能做這件事。

介紹了原理之后，有什么更好的干貨要介紹的嗎？這個當然沒有了。。。

這怎么可能，google是那么的強大，只有想不到沒有做不到。只要你想用的，這里都有的。我在網上找到這么一個JS感覺用起來還是比較方便的。它就是shortcuts.js，官網地址。還有一個jquery版本的，github地址。 

shortcuts.js支持單獨按鍵和組合按鍵，同時可以通過配置是組合按鍵在輸入框內失效。

它的使用方式是：    

shortcut("[",function() {
    alert("Hi there!");
}, {
    'type':'keydown', //事件
    'propagate':false, //是否支持冒泡
    'disable_in_input':true, //是否在輸入框內有效
    'target':document, //作用范圍
});

可以通過在源碼中擴展特殊按鍵，是組合按鍵更豐富。