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

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

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

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

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

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

KeyboardEvent.key

KeyboardEvent.code

KeyboardEvent.ctrlKey

KeyboardEvent.shiftKey

KeyboardEvent.altKey

KeyboardEvent.metaKey

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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