前端JavaScript中編寫鍵盤事件的實戰(zhàn)教學(xué)
在Web開發(fā)中，鍵盤事件是提升用戶體驗最直接的手段之一。特別是在工具類頁面（如驗證碼識別、圖片瀏覽），合理的快捷鍵能讓操作效率翻倍。
本文從基礎(chǔ)到實戰(zhàn)，講清楚鍵盤事件怎么寫、怎么用、有哪些坑。
一、三個事件的區(qū)別
| 事件 | 觸發(fā)時機 | 適用場景 |
|---|---|---|
keydown | 按下按鍵時立刻觸發(fā) | 推薦，響應(yīng)最快，能拿到e.key |
keyup | 松開按鍵時觸發(fā) | 需要判斷按鍵時長時用 |
keypress | 按下并產(chǎn)生字符時觸發(fā) | ?? 已廢棄，不要用 |
結(jié)論：99%的場景用 keydown 就夠了。
二、基礎(chǔ)寫法
document.addEventListener('keydown', function(e) {
console.log(e.key); // 按下的鍵，如 "a", "Enter", "ArrowLeft"
console.log(e.code); // 物理鍵位，如 "KeyA", "Space", "ArrowLeft"
console.log(e.shiftKey); // 是否同時按了Shift
});
e.key vs e.code 怎么選？
e.key→ 讀的是"字符"，a和A都返回"a"（配合Shift）e.code→ 讀的是"物理鍵"，永遠返回"KeyA"
做快捷鍵，用 e.key 更方便，因為不用判斷大小寫。
三、實戰(zhàn)：驗證碼識別頁面的快捷鍵
這是我們實際項目中的完整實現(xiàn)：
document.addEventListener('keydown', function(e) {
// 關(guān)鍵：避免在輸入框中觸發(fā)
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
switch (e.key) {
case 'a':
case 'A':
e.preventDefault();
left_handed(); // 左旋1°
break;
case 'd':
case 'D':
e.preventDefault();
right_handed(); // 右旋1°
break;
case 'ArrowLeft':
e.preventDefault();
last_img(); // 上一張
break;
case 'ArrowRight':
e.preventDefault();
next_img(); // 下一張
break;
case 'Enter':
e.preventDefault();
identify(); // 識別
break;
case 's':
case 'S':
e.preventDefault();
save_img(); // 保存
break;
}
});
為什么要加e.preventDefault()？
不加的話，按 Enter 會觸發(fā)表單提交，按方向鍵會滾動頁面。preventDefault() 阻止瀏覽器默認(rèn)行為，把按鍵完全交給你的代碼。
四、加個滾輪切換，效率再提一檔
鍵盤之外，鼠標(biāo)滾輪也能綁定：
document.addEventListener('wheel', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
e.preventDefault(); // 必須加，否則頁面會跟著滾
if (e.deltaY > 0) {
next_img(); // 滾輪向下 → 下一張
} else {
last_img(); // 滾輪向上 → 上一張
}
}, { passive: false }); // passive: false 是關(guān)鍵
{ passive: false } 不能省。 瀏覽器默認(rèn)把 wheel 事件設(shè)為 passive: true（性能優(yōu)化），這時調(diào)用 preventDefault() 會被靜默忽略，頁面照樣滾動。
五、三個常見坑
坑1：不判斷輸入框
用戶在輸入框里打字，結(jié)果觸發(fā)了快捷鍵，體驗直接崩掉。
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
這行代碼必須放在最前面。
坑2：用keypress
keypress 已經(jīng)被廢棄，而且不支持方向鍵、功能鍵。別用。
坑3：忘記阻止默認(rèn)行為
Enter 提交表單、方向鍵滾動頁面、空格鍵滾動頁面……不加 preventDefault()，快捷鍵和瀏覽器行為會打架。
六、快捷鍵設(shè)計原則
| 原則 | 說明 |
|---|---|
| 手指移動最小化 | 左手管 A/S，右手管 Enter/方向鍵 |
| 符合直覺 | ← 上一張，→ 下一張，Enter 確認(rèn) |
| 避免沖突 | 不要用瀏覽器保留鍵（F5、Ctrl+S 等） |
| 大小寫都支持 | case 'a': case 'A': 寫在一起 |
總結(jié)
鍵盤事件的核心就三句話：
- 用
keydown，拿e.key判斷按鍵 - 加
preventDefault()防止默認(rèn)行為 - 第一行判斷是否在輸入框中
掌握這三點，你就能給任何頁面加上流暢的快捷鍵操作。
到此這篇關(guān)于前端JavaScript中編寫鍵盤事件的實戰(zhàn)教學(xué)的文章就介紹到這了,更多相關(guān)JavaScript鍵盤事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js根據(jù)屬性刪除對象數(shù)組里的相應(yīng)對象
這篇文章主要介紹了js根據(jù)屬性刪除對象數(shù)組里的相應(yīng)對象,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇layui table 獲取分頁 limit的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
在js中如果打算使用setInterval進行倒數(shù),計時等功能，往往是不準(zhǔn)確的，針對這個問題，本文有個不錯的解決方案2014-05-05
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了Javascript中的arguments對象 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
斐波那契是自然界與社會中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
JavaScript操作壓縮圖片原理不難，已有成熟 API，然而在實際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機）類型眾多，有些手機壓縮圖片甚至變黑。本文將一步一步解決此類問題2021-05-05
element select下拉框編輯時回顯已經(jīng)刪除的數(shù)據(jù)操作代碼
今天做項目遇到一個棘手的問題,關(guān)于element select下拉框編輯時回顯問題,下面小編通過實例代碼介紹element select下拉框編輯時回顯已經(jīng)刪除的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章介紹了gojs實現(xiàn)螞蟻線動畫效果的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
原生JavaScript創(chuàng)建不可變對象的方法簡單示例
這篇文章主要介紹了原生JavaScript創(chuàng)建不可變對象的方法,結(jié)合簡單實例形式分析了基于原生JavaScript創(chuàng)建不可變對象的相關(guān)原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05