聊聊KeyCode被棄用后的問題
關(guān)于KeyCode被棄用后的問題
目前在開發(fā)是會(huì)發(fā)現(xiàn)，鍵盤事件的event事件對(duì)象的keyCode=“ASCll碼值”已經(jīng)被棄用了，但是大部分情況是不影響使用的，但是為了避免不必要的麻煩，還是建議大家依據(jù)實(shí)際情況做選擇。
解決方法
document.onkeyup = function(event) {
event = window.event || event;
// 新方法
if (event.key == 'p') {
alert("按下了p鍵");
}
// 舊方法
if (event.keyCode == 80) {
alert("按下了p鍵");
}
}
簡單來說就是將
keyCode=“鍵盤的ASCLL碼值”，例 keyCode=“80”、keyCode="76"等
改為
key=“鍵盤的字母內(nèi)容”，例 key=“a”、key=“Alt”、key="Enter"等
個(gè)人感覺，簡潔了許多。
按鍵事件中的keycode被棄用，改用e.code替代
js事件中，keyCode已廢棄，最佳替代寫法為e.code
也有用e.key寫法的，但是這種寫法不夠準(zhǔn)確，
比如你按鍵盤上的左右兩邊的Ctrl鍵，e.key都是Ctrl，
而e.code會(huì)明確寫出來是CtrlLeft還是CtrlRight
再比如，在鍵盤上敲擊空格鍵，key和code就有明顯的區(qū)別了：
示例：
document.onkeydown = function(e) {
console.log('code: ', e.code);
}
參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)的最簡Table選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)的最簡Table選項(xiàng)卡效果,涉及簡單的JavaScript響應(yīng)鼠標(biāo)事件切換樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
如何用JavaScript動(dòng)態(tài)呼叫函數(shù)(兩種方式)
下面介紹一下動(dòng)態(tài)呼叫函數(shù)目前應(yīng)該有下面兩種方式，它們之間的使用及對(duì)比，感興趣的朋友可以研究下，希望可以幫助到你2013-05-05
JavaScript toDataURL圖片轉(zhuǎn)換問題解讀
這篇文章主要介紹了JavaScript toDataURL圖片轉(zhuǎn)換問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Flutter自適用高度PageView的實(shí)現(xiàn)方案
在?Flutter?中,PageView?是一個(gè)非常常用的組件,能夠?qū)崿F(xiàn)多個(gè)頁面的滑動(dòng)切換,這篇文章主要介紹了Flutter-自適用高度PageView,需要的朋友可以參考下2024-08-08
本文主要介紹了原生js仿淘寶網(wǎng)商品放大鏡效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了js添加事件的通用方法，還為大家介紹了js綁定事件的常用方式，感興趣的小伙伴們可以參考一下2016-05-05
在我們平時(shí)寫js的過程中，有可能會(huì)考慮到盡量兼容瀏覽器的兼容性，下面是兩個(gè)常用的方法2008-09-09
js 調(diào)整select 位置的函數(shù)，向上移動(dòng)，向下移動(dòng)，移動(dòng)到最上，移動(dòng)到最后 這里把項(xiàng)目中寫過的幾個(gè)js函數(shù)來給大家分享，功能是通過js來實(shí)現(xiàn)對(duì)select 中的option的位置進(jìn)行移動(dòng)，代碼如下2008-02-02
完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(一)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03