我們都知道，JS監(jiān)聽(tīng)鍵盤(pán)事件，如下：

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("按回車(chē)")
	}
};

有些時(shí)候，我們需要在網(wǎng)頁(yè)上，使用javascript增加一些快捷按鍵，方便用戶(hù)使用一些常用的操作，比如：保存，撤銷(xiāo)，復(fù)制、粘貼等等。

下面簡(jiǎn)單梳理一下思路：

我們所熟悉的按鍵有這么集中類(lèi)型：

單獨(dú)的按鍵操作，如：delete、up、down等

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

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

大概只有這么幾種情況了，至少我沒(méi)有見(jiàn)過(guò)其他的情況。如果確實(shí)存在的話(huà)，基本實(shí)現(xiàn)的原理也比較類(lèi)似，本文就不再贅述了。

上面這三種情況， 都要處理的一個(gè)關(guān)鍵問(wèn)題是阻止默認(rèn)行為：比如刪除按鍵，保存網(wǎng)頁(yè)按鍵，保存書(shū)簽等等，這些網(wǎng)頁(yè)上的默認(rèn)行為都需要阻止掉。另外一個(gè)就是監(jiān)聽(tīng)按鍵，然后根據(jù)自己的需求，處理相應(yīng)的事件。

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

我們寫(xiě)一個(gè)簡(jiǎn)單的例子：

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

這個(gè)事件有很多的屬性和方法，這里我們不會(huì)一一進(jìn)行說(shuō)明，只是挑出來(lái)我們比較感興趣的幾個(gè)進(jìn)行說(shuō)明。

對(duì)照上面提到需要處理的兩件事：

第一阻止默認(rèn)事件，在W3C標(biāo)準(zhǔn)和IE下，處理方式不太一致。分別是執(zhí)行e.preventDefault()方法和將e.returnValue = false屬性。當(dāng)然如果你使用的jquery等類(lèi)庫(kù)的話(huà)，只需要寫(xiě)一個(gè)e.preventDefault()就可以了，它幫你做到了兼容。

第二監(jiān)聽(tīng)按鍵類(lèi)型，按鍵分兩種情況，一種是單獨(dú)按鍵（只有一個(gè)鍵），一種是組合鍵（兩個(gè)以上按鍵）。單獨(dú)按鍵需要監(jiān)聽(tīng)事件的keyCode、charCode和which屬性。

這張表介紹的比較詳細(xì)，出自《JavaScript Madness不同的瀏覽器的keycode比較》

當(dāng)然使用了jquery也不用擔(dān)心兼容問(wèn)題了，直接使用e.keyCode即可。那怎么知道用戶(hù)使用了組合鍵呢？

我們看到事件還有這么幾個(gè)屬性：ctrlKey（metaKey）、altKey、shiftKey，當(dāng)你同時(shí)按下組合鍵的時(shí)候，這幾個(gè)屬性會(huì)變成true，所以組合鍵就可以通過(guò)監(jiān)聽(tīng)按鍵code和這幾個(gè)屬性的狀態(tài)進(jìn)行判斷了。

舉一個(gè)簡(jiǎn)單的例子，監(jiān)聽(tīng)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監(jiān)聽(tīng)組合按鍵的原理基本上就是這個(gè)樣子了，但是發(fā)現(xiàn)了一些問(wèn)題，比如說(shuō)：ctrl（cmd）+ w（n、q）等chrome瀏覽器快捷鍵無(wú)法進(jìn)行阻止，這個(gè)不知道有沒(méi)有方式進(jìn)行阻止。個(gè)人猜測(cè)可能需要更高的權(quán)限才能做這件事。

介紹了原理之后，有什么更好的干貨要介紹的嗎？這個(gè)當(dāng)然沒(méi)有了。。。

這怎么可能，google是那么的強(qiáng)大，只有想不到?jīng)]有做不到。只要你想用的，這里都有的。我在網(wǎng)上找到這么一個(gè)JS感覺(jué)用起來(lái)還是比較方便的。它就是shortcuts.js，官網(wǎng)地址。還有一個(gè)jquery版本的，github地址。 

shortcuts.js支持單獨(dú)按鍵和組合按鍵，同時(shí)可以通過(guò)配置是組合按鍵在輸入框內(nèi)失效。

它的使用方式是：    

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

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