KeyboardEvent.keyCode 已棄用。 這在實踐中意味着什么？

Question

根據 MDN，我們絕對不應該使用.keyCode屬性。 它已被棄用：

https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode

在 W3 學校，這個事實被淡化了，只有一個旁注說.keyCode只是為了兼容性而提供，最新版本的 DOM 事件規范建議改用.key屬性。

問題是瀏覽器不支持.key ，那我們應該用什么呢？ 有什么我想念的嗎？

Answer 1

您可以通過三種方法來處理它，因為它寫在您共享的鏈接上。

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

你應該考慮它們，如果你想要跨瀏覽器支持，這是正確的方法。

如果你實現這樣的東西可能會更容易。

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Answer 2

例如，如果您想檢測是否單擊了“Enter”鍵：

代替

event.keyCode === 13

做喜歡

event.key === 'Enter'

Answer 3

TLDR：我建議您應該使用新的event.key和event.code屬性，而不是舊的。 IE 和 Edge 支持這些屬性，但尚不支持新的鍵名。 對於他們來說，有一個小的 polyfill 可以讓他們輸出標准的密鑰/代碼名稱：

https://github.com/shvaikalesh/shim-keyboard-event-key

---

我來到這個問題是為了尋找與 OP 相同的 MDN 警告的原因。 搜索更多之后， keyCode的問題變得更加清晰：

使用keyCode的問題是非英文鍵盤會產生不同的輸出，甚至不同布局的鍵盤也會產生不一致的結果。 另外，還有一個案例

如果您閱讀 W3C 規范： https : //www.w3.org/TR/uievents/#interface-keyboardevent

在實踐中，keyCode 和 charCode 跨平台不一致，甚至在不同操作系統上或使用不同本地化的相同實現。

它深入描述了keyCode ： https : //www.w3.org/TR/uievents/#legacy-key-attributes

這些功能從未被正式指定，當前的瀏覽器實現有很大的不同。 大量遺留內容（包括腳本庫）依賴於檢測用戶代理並相應地采取行動，這意味着任何將這些遺留屬性和事件形式化的嘗試都可能破壞與修復或啟用一樣多的內容。 此外，這些屬性不適合國際使用，也不能解決可訪問性問題。

那么，在確定了遺留 keyCode 被替換的原因之后，讓我們來看看你今天需要做的事情：

1. 所有現代瀏覽器都支持新屬性（ key和code ）。
2. IE 和 Edge 支持舊版本的規范，其中某些鍵的名稱不同。 您可以為它使用墊片： https : //github.com/shvaikalesh/shim-keyboard-event-key （或推出您自己的 - 反正它相當小）
3. Edge 在最新版本中修復了這個錯誤（可能會在 2018 年 4 月發布） - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. 請參閱您可以使用的事件鍵列表： https : //www.w3.org/TR/uievents-key/

Answer 4

此外，不推薦使用所有keyCode 、 which 、 charCode和keyIdentifier ：
charCode和keyIdentifier是非標准功能。
從 Chrome 54 和 Opera 41.0 開始刪除keyIdentifier
keyCode返回 0，在 FF 上具有正常字符的按鍵事件。

關鍵屬性：

 readonly attribute DOMString key

持有與按下的鍵對應的鍵屬性值

在撰寫本文時，所有主要瀏覽器都支持key屬性：Firefox 52、Chrome 55、Safari 10.1、Opera 46。 Internet Explorer 11 除外，它具有：非標准密鑰標識符和 AltGraph 的錯誤行為。 更多信息
如果這很重要和/或向后兼容性很重要，那么您可以使用以下代碼中的功能檢測：

請注意， key與keyCode或which屬性不同：它包含鍵的名稱而不是其代碼。 如果您的程序需要字符代碼，那么您可以使用charCodeAt() 。 對於單個可打印字符，您可以使用charCodeAt() ，如果您正在處理其值包含多個字符的鍵，例如ArrowUp機會是：您正在測試特殊鍵並相應地采取行動。 所以嘗試實現一個鍵值及其對應代碼表charCodeArr["ArrowUp"]=38 , charCodeArr["Enter"]=13 , charCodeArr[Escape]=27 ... 等等，請看一下Key值及其對應的代碼

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */  

可能您想考慮向前兼容性，即在舊屬性可用時使用它們，並且僅在刪除時才切換到新屬性：

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

另請參閱： KeyboardEvent.code屬性文檔以及此答案中的更多詳細信息。

Answer 5

MDN已經提供了解決方案：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Answer 6

這里建議使用key value 而不是keyCode ，如果失敗則使用keyCode 。 盡管這還不夠，因為此屬性中的值不兼容。 事情是新鍵包含控制鍵的字符串，例如：ArrowUp，但keyCode將只包含簡單的代碼

String.fromCharCode(event.keyCode)

將導致不可打印的字符。 這里是可打印字符的解決方案：

element.keydown((event) => {
    var symbolPressed;
    //cross browser
    if (event.key !== undefined) {
        symbolPressed = event.key; //Here control characters represented as String like: ArrowUp
        if (symbolPressed.length > 1) return; //filter out control characters
    } else if (event.keyCode !== undefined) {
        symbolPressed = String.fromCharCode(event.keyCode); //Here control chars represented as one char string
    }
    //Update this regex if you need other characters
    if (!symbolPressed.match(/[A-z0-9\s]/)) return;
    console.log(symbolPressed);
});

如果您需要不可打印的控制字符，您必須相應地更新條件和正則表達式。

Answer 7

e.charCode已被棄用：

<input
  onChange={(e) => setToken(e.target.value)}
  type="text"
  value={token}
  onKeyPress={(e) => {
    if (e.charCode === 13) {
      verifyLoginF()
    }
  }}
/>

你現在應該使用： e.key === 'Enter'

Answer 8

使用 onkeypress 和 onkeydown 到 event.which，它是切換 [CHARACTER code] 或 [KEYcode]

 function myKey(event){ var keycode = event.keyCode; //key code variant 1, not recomendate var keywhic = event.which; //key code variant 2, nice worked var unicode = event.key; //string name code, nice worked var chacode = event.charCode; //works onkeypress="myKey(event)" var metakey = event.metaKey; //true false, winKey or macComand document.getElementById("demo").innerHTML = keycode+" "+keywhic+" "+unicode+" "+chacode+" "+metakey; }

 <!DOCTYPE html> <html> <body onkeydown="myKey(event)"> <!--onkeypress="myKey(event)"--> <h1 id="demo">Keyboard Buttons click me and test the keyboard</h1> <script> </script> </body> </html>

Answer 9

(e)=>{
  e.key === 'Escape';
}

是相同的

(e)=>{
  e.keyCode === 27;
}

最好使用第二個。

Answer 10

您可以使用

parseInt(event.key, radix: 10)