KeyboardEvent和快捷鍵

專案中需要對網頁的 ui 操作設定快捷鍵，但是我們的開發機是 mac，使用者使用的是 windows。所以開發起來遇到一些小小的坑。現在我們來梳理下這些知識點。

document.addeventlistener( 'keydown', function( event )
} );

上面的**只是做乙個示例，按鍵相關的屬性有很多個，這些屬性定義在 keyboardevent 這個介面中。keydown 事件監聽函式接受的第乙個引數 event 就實現了這個介面（event不僅僅實現了 keyboardevent 還實現了其他介面噢）。keyboardevent 這個介面是在 w3c 的 dom 規範裡面定義的，現在最新發布的規範版本是 dom4。不過呢，keyboardevent 在 dom4 中並沒有什麼更新，文件直接把其定義指向了 dom3 中的 keyboardevent 介面定義。所以接下來，讓我們看下規範中是如何定義鍵盤事件的。

keyboardevent.key

如果你按下的按鈕所代表的是乙個可列印的字元（printed representation），那麼這個 key 的值就是這個字元（譬如：a、enter、shift、capslock、backspace）。如果是一些特殊字元呢，這個值就可能是 unidentified。你要問哪些鍵是特殊字元，這個。。。倫家標準裡面說了應鍵盤而異。這裡說的是單獨按乙個按鍵的場景，組合鍵又不同了，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 thealgorithmfor determining the key value defined in this specification.

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

keyboardevent.code

這個值比較詭異，它表示你按了鍵盤上的哪個按鍵。你按 a，code 的值是 keya，你按左邊的 shift，code 的值是 shiftleft。什麼意思呢？就是他表示你按的按鍵在鍵盤的哪個位置。這裡就有趣了，因為不同語言的鍵盤同乙個鍵代表的字元可能不同，但是位置是相同的。打個比方：keyq 代表的是我們普通鍵盤q按鍵。但是呢 dvorak 鍵盤q這個位置的按鈕代表的不是 q，而是'。所以如果你按同乙個按鈕，key 的值可能不同，code 的值會相同。

有了上述的幾個值一般的單個按鍵和組合鍵都能檢測到了，不過按照 web 標準的尿性你可能會猜到，那相容性問題呢？查下相容表。。。key 和 code 相容性堪憂啊，都是瀏覽器高階版本支援或者根本不支援。那麼怎麼辦？

keyboardevent 介面標準經歷了許多草稿版本，首先在 dom2 下由於沒有協商一致，它被丟棄； dom3 重新加入。這導致了在早期的 dom2 版本中非標準的實現。

dom3 規範中說這些過期的屬性會因平台，鍵盤語言，鍵盤布局等等眾多因素而導致其取值不統一。

如果你要在不同的瀏覽器甚至不同的平台使用一套快捷鍵，你嘗試上述所有說到的屬性，你會發現表現幾乎都不一致。有的情況是相同按鈕[組合]對應同乙個屬性取出的值不同。譬如 alt + a，當你在 a 按下去的時候去獲取 keyboardevent.key 的值，windows 平台得到的是a，而 mac 平台下得到的是å。有的情況是上述 keyboardevent 中很多屬性都不支援，你連挑的機會都沒有，譬如老版本的 ie 幾乎只支援 keyboardevent.keycode 這乙個屬性。

經過大量的測試，如果你需要乙個大路化通用的解決方案，只能使用 keyboardevent.keycode 來做統一的判斷。當然如果這不能滿足你的要求，那麼你可以通過 useragent 來判斷不同平台，針對不同平台採取不同的快捷鍵策略。以上就是對這個知識點的簡單梳理，如果想要更深入的如了解鍵盤事件的模型，請參考下方附上的規範。

keyboardevent from mdn:

keyboardevent in dom3 events specification:

KeyboardEvent和快捷鍵

快重傳和快恢復

PD快充和QC快充

快排2 經典快排和荷蘭國旗快排

KeyboardEvent和快捷鍵

快重傳和快恢復

PD快充和QC快充

快排2 經典快排和荷蘭國旗快排

相關推薦