已棄用JavaScript keyCode。這在實踐中意味着什麼？

Question

根據MDN，我們絕對應該使用.keyCode屬性而不是。它已經過時：

https://developer.mozilla.org/en-US/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

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 3

做我想做的。我根本不在乎。 MDN可以說它已被棄用，但如果他們沒有提供替代（keyIdentifier除外），那麼您必須使用已棄用的版本。

Answer 4

此外，所有的keyCode，which，charCode和keyIdentifier被棄用：
charCode和keyIdentifier是非標準的特性。
keyIdentifier從Chrome 54和Opera 41.0中刪除
keyCode在FF上的正常字符的按鍵事件上返回0。

The key property：

readonly attribute DOMString key 

保持對應於該按鍵的鍵屬性值按

在編寫這本書的時候，key財產被所有主流瀏覽器的支持：Firefox 52，Chrome 55，Safari 10.1，Opera 46.除Internet Explorer 11以外： 非標準鍵標識符和AltG的不正確行爲拉斐。More info
如果是重要和/或後向兼容性是，那麼就可以使用特徵檢測，如以下代碼：

注意，key值是從在該keyCode或which性質的不同：它包含密鑰的名稱而不是其代碼。如果你的程序需要字符代碼，那麼你可以使用charCodeAt()。 對於單個可打印字符，您可以使用charCodeAt()，如果您要處理的鍵值包含多個字符，如ArrowUp 可能是：您正在測試特殊鍵並相應採取相應操作。因此，嘗試推行鍵的值的表和它們對應的 碼charCodeArr["ArrowUp"]=38，charCodeArr["Enter"]=13，charCodeArr[Escape]=27 ...等，請看一看Key Values及其corresponding codes

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財產docs以及answer中的一些更多詳細信息。