摘要：背景項(xiàng)目中需要對(duì)網(wǎng)頁(yè)的操作設(shè)置快捷鍵，但是我們的開發(fā)機(jī)是，用戶使用的是。通常和是一致的。規(guī)范中說(shuō)這些過(guò)期的屬性會(huì)因平臺(tái)，鍵盤語(yǔ)言，鍵盤布局等等眾多因素而導(dǎo)致其取值不統(tǒng)一。

項(xiàng)目中需要對(duì)網(wǎng)頁(yè)的 UI 操作設(shè)置快捷鍵，但是我們的開發(fā)機(jī)是 Mac，用戶使用的是 Windows。所以開發(fā)起來(lái)遇到一些小小的坑?，F(xiàn)在我們來(lái)梳理下這些知識(shí)點(diǎn)。

網(wǎng)頁(yè)上要設(shè)置快捷鍵最基礎(chǔ)的做法一般是監(jiān)聽 keydown 事件，然后通過(guò)監(jiān)聽函數(shù)參數(shù)獲取一些按鍵相關(guān)的屬性來(lái)判斷用戶按了哪些按鍵：

  document.addEventListener( "keydown", function( event ){
    let key = event.key;
    if ( key === "Enter" ) {
      console.log( "你按下的是回車鍵～" );
    }
  } );

上面的代碼只是做一個(gè)示例，按鍵相關(guān)的屬性有很多個(gè)，這些屬性定義在 KeyboardEvent 這個(gè)接口中。keydown 事件監(jiān)聽函數(shù)接受的第一個(gè)參數(shù) event 就實(shí)現(xiàn)了這個(gè)接口（event不僅僅實(shí)現(xiàn)了 KeyboardEvent 還實(shí)現(xiàn)了其他接口噢）。KeyboardEvent 這個(gè)接口是在 W3C 的 DOM 規(guī)范里面定義的，現(xiàn)在最新發(fā)布的規(guī)范版本是 DOM4。不過(guò)呢，KeyboardEvent 在 DOM4 中并沒(méi)有什么更新，文檔直接把其定義指向了 DOM3 中的 KeyboardEvent 接口定義。所以接下來(lái)，讓我們看下規(guī)范中是如何定義鍵盤事件的。

先介紹下我們常用的一些屬性（規(guī)范地址）：

KeyboardEvent.key

KeyboardEvent.code

KeyboardEvent.ctrlKey

KeyboardEvent.shiftKey

KeyboardEvent.altKey

KeyboardEvent.metaKey

KeyboardEvent.ctrlKey | shiftKey | altKey | metaKey 比較簡(jiǎn)單，表示當(dāng)你按下鍵盤的時(shí)候，Ctrl | Shift | Alt | meta 按鍵是否已經(jīng)被按下。如果已經(jīng)被按下這些值就是 true，通常我們要運(yùn)用組合鍵的判斷會(huì)用到（譬如：Alt + a）。大家看到 meta 會(huì)疑惑這個(gè)是哪個(gè)鍵？在 Mac 平臺(tái)上指的是 command 鍵（?），而在 Windows 平臺(tái)指的是 windows 鍵（?）。但是不是所有 Windows 電腦鍵盤都有 ? 這個(gè)鍵的。接下來(lái)我們介紹下最重要的兩個(gè)屬性 key 和 code。

如果你按下的按鈕所代表的是一個(gè)可打印的字符（printed representation），那么這個(gè) key 的值就是這個(gè)字符（譬如：a、Enter、Shift、CapsLock、Backspace）。如果是一些特殊字符呢，這個(gè)值就可能是 Unidentified。你要問(wèn)哪些鍵是特殊字符，這個(gè)。。。倫家標(biāo)準(zhǔn)里面說(shuō)了應(yīng)鍵盤而異。這里說(shuō)的是多帶帶按一個(gè)按鍵的場(chǎng)景，組合鍵又不同了，key 出什么值是有一套簡(jiǎn)單的算法的：

key holds the key value of the key pressed. If the value is has a printed representation, it MUST be a non-empty Unicode character string, conforming to the algorithm for determining the key value defined in this specification.

這里我只介紹最基本的用法，不詳述算法。

這個(gè)值比較詭異，它表示你按了鍵盤上的哪個(gè)按鍵。你按 a，code 的值是 KeyA，你按左邊的 Shift，code 的值是 ShiftLeft。什么意思呢？就是他表示你按的按鍵在鍵盤的哪個(gè)位置。這里就有趣了，因?yàn)椴煌Z(yǔ)言的鍵盤同一個(gè)鍵代表的字符可能不同，但是位置是相同的。打個(gè)比方：KeyQ 代表的是我們普通鍵盤q按鍵。但是呢 Dvorak 鍵盤q這個(gè)位置的按鈕代表的不是 q，而是"。所以如果你按同一個(gè)按鈕，key 的值可能不同，code 的值會(huì)相同。

有了上述的幾個(gè)值一般的單個(gè)按鍵和組合鍵都能檢測(cè)到了，不過(guò)按照 web 標(biāo)準(zhǔn)的尿性你可能會(huì)猜到，那兼容性問(wèn)題呢？查下兼容表。。。key 和 code 兼容性堪憂啊，都是瀏覽器高級(jí)版本支持或者根本不支持。那么怎么辦？

KeyboardEvent 接口標(biāo)準(zhǔn)經(jīng)歷了許多草稿版本，首先在 DOM2 下由于沒(méi)有協(xié)商一致，它被丟棄； DOM3 重新加入。這導(dǎo)致了在早期的 DOM2 版本中非標(biāo)準(zhǔn)的實(shí)現(xiàn)。

KeyboardEvent.char：如果是 printed 的字符，則值是這個(gè)字符，如果是按鍵沒(méi)有對(duì)應(yīng)的 printed 字符，值為空。（如果該按鍵用作插入多個(gè)字符的宏, 則此屬性的值是整個(gè)字符串, 而不僅僅是第一個(gè)字符。）

KeyboardEvent.charCode：是按鍵字符對(duì)應(yīng)的 Unicode 編碼的數(shù)字。（對(duì)于其 char 屬性包含多個(gè)字符的按鍵是該屬性中第一個(gè)字符的 Unicode 值。）

KeyboardEvent.keyCode：返回一個(gè)代表你所按按鍵的數(shù)字，這個(gè)數(shù)字是和系統(tǒng)實(shí)現(xiàn)相關(guān)。

KeyboardEvent.which：通常和 keyCode 是一致的。

DOM3 規(guī)范中說(shuō)這些過(guò)期的屬性會(huì)因平臺(tái)，鍵盤語(yǔ)言，鍵盤布局等等眾多因素而導(dǎo)致其取值不統(tǒng)一。

如果你要在不同的瀏覽器甚至不同的平臺(tái)使用一套快捷鍵，你嘗試上述所有說(shuō)到的屬性，你會(huì)發(fā)現(xiàn)表現(xiàn)幾乎都不一致。有的情況是相同按鈕[組合]對(duì)應(yīng)同一個(gè)屬性取出的值不同。譬如 Alt + a，當(dāng)你在 a 按下去的時(shí)候去獲取 KeyboardEvent.key 的值，Windows 平臺(tái)得到的是a，而 Mac 平臺(tái)下得到的是?。有的情況是上述 KeyboardEvent 中很多屬性都不支持，你連挑的機(jī)會(huì)都沒(méi)有，譬如老版本的 IE 幾乎只支持 KeyboardEvent.keyCode 這一個(gè)屬性。

經(jīng)過(guò)大量的測(cè)試，如果你需要一個(gè)大路化通用的解決方案，只能使用 KeyboardEvent.keyCode 來(lái)做統(tǒng)一的判斷。當(dāng)然如果這不能滿足你的要求，那么你可以通過(guò) userAgent 來(lái)判斷不同平臺(tái)，針對(duì)不同平臺(tái)采取不同的快捷鍵策略。以上就是對(duì)這個(gè)知識(shí)點(diǎn)的簡(jiǎn)單梳理，如果想要更深入的如了解鍵盤事件的模型，請(qǐng)參考下方附上的規(guī)范。

KeyboardEvent from MDN: https://developer.mozilla.org...

KeyboardEvent in DOM3 Events Specification: https://w3c.github.io/uievent...