JavaScript監(jiān)聽鍵盤事件代碼實(shí)現(xiàn)
在寫網(wǎng)頁的時(shí)候，常常需要監(jiān)聽鍵盤事件，讓我們來看看如何實(shí)現(xiàn)吧。
監(jiān)聽方式
鍵盤事件往往是全局監(jiān)聽，設(shè)監(jiān)聽的函數(shù)為keyboard()。
keyup事件類型。該類型觸發(fā)條件為按鍵按下去并松開。
//長按并松開只觸發(fā)一次
document.addEventListener('keyup', keyboard);
document.onkeyup = keyboard; //記得不要加括號(hào)！
keydown事件類型。該類型觸發(fā)條件為按鍵按下去。
//長按可以觸發(fā)多次
document.addEventListener('keydown', keyboard);
document.onkeydown = keyboard;
keypress事件類型。該類型觸發(fā)條件為按鍵按下去且產(chǎn)生了字符。
//長按可以觸發(fā)多次
//遇到'1'，'a'，回車等按鍵可以觸發(fā)，但del鍵，向上鍵等則不會(huì)
document.addEventListener('keypress', keyboard);
document.onkeypress = keyboard;
需要注意的是：keypress的兼容性并不是很好，比如安卓系統(tǒng)就不支持，所以盡量避免使用。
onkey___ 和 addEventListener之間，最好選后者。
另外，如果keyboard不帶參，則監(jiān)聽的事件是任何符合條件的按鍵，即只要你按了鍵盤，就會(huì)觸發(fā)事件。
監(jiān)聽具體事件（即按了哪個(gè)鍵）
上文提到的keyboard函數(shù)是可以設(shè)形參的，且在調(diào)用的時(shí)候不需加實(shí)參。
function keyboard(eve) {
...
}
document.onkeyup = keyboard; //不需要加參數(shù)和括號(hào)
此時(shí)的eve便是鍵盤事件類型的變量，它有以下屬性：
| 屬性 | 意義 |
|---|---|
| key | 事件對(duì)應(yīng)按鈕的字符 |
| keyCode | 事件對(duì)應(yīng)按鈕的Unicode碼 |
| which | 事件對(duì)應(yīng)按鈕的Unicode碼 |
其中，不同的瀏覽器對(duì)keyCode和which的支持情況是不同的，下文會(huì)有關(guān)于提升兼容性的方法。
舉個(gè)例子：
<p id="msg1"></p>
<p id="msg2"></p>
<script>
function keyboard(eve) {
msg1.textContent += eve.key;
msg2.textContent += eve.keyCode || eve.which;
//該方法可以提升代碼的兼容性
}
document.onkeyup = keyboard;
</script>
input:
aoutput:
a
65
需要注意的是：key屬性的兼容性并不高，最好是先獲取Unicode碼，再轉(zhuǎn)成對(duì)應(yīng)字符。
let x = eve.keyCode || eve.which;
let key = String.fromCharCode(x);
想知道某個(gè)按鍵的Unicode碼，可以查手冊(cè)，也可以在控制臺(tái)中試驗(yàn)。
簡單點(diǎn)的可以用ASCII碼來頂著 https://www.runoob.com/tags/html-ascii.html 。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹IE和火狐在添加刪除事件上的區(qū)別，并給出通用的解決方法，需要的朋友可以參考下。2016-05-05
JavaScript利用生成器函數(shù)實(shí)現(xiàn)優(yōu)雅處理異步任務(wù)流
Generators?是?JavaScript?中的一種特殊函數(shù)，它們可以暫停執(zhí)行并根據(jù)需要生成多個(gè)值,本文將詳細(xì)介紹?generators?的作用、用法以及與其他語言特性的配合使用,希望對(duì)大家有所幫助2023-07-07
今天小編就為大家分享一篇layui--js控制switch的切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時(shí)機(jī)和觸發(fā)順序?qū)嵗v解
事件監(jiān)聽是Web開發(fā)中非常重要的一個(gè)概念,掌握了它的用法,可以讓我們實(shí)現(xiàn)更加豐富和動(dòng)態(tài)的交互效果,這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時(shí)機(jī)和觸發(fā)順序的相關(guān)資料,需要的朋友可以參考下2024-01-01
JS+canvas五子棋人機(jī)對(duì)戰(zhàn)實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了JS+canvas五子棋人機(jī)對(duì)戰(zhàn)實(shí)現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
ES6學(xué)習(xí)筆記之Set和Map數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要介紹了ES6學(xué)習(xí)筆記之Set和Map數(shù)據(jù)結(jié)構(gòu),結(jié)合實(shí)例形式詳細(xì)分析了ECMAScript中基本數(shù)據(jù)結(jié)構(gòu)Set和Map的常用屬性與方法的功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)手風(fēng)琴效果代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
本文通過一段簡單的實(shí)例代碼給大家介紹js實(shí)現(xiàn)打印彩色菱形的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
NCZ在他的同名博客《Feature detection is not browser detection》中，講述了一直以來前端開發(fā)中的一個(gè)熱門技術(shù)——檢測用戶的瀏覽器平臺(tái)，并詳細(xì)地?cái)⒄f歷史發(fā)展以及各種辦法的優(yōu)缺點(diǎn)。2010-01-01
TypeScript高級(jí)用法的知識(shí)點(diǎn)匯總
這篇文章主要給大家介紹了關(guān)于TypeScript高級(jí)用法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用TypeScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12