這篇文章主要講解了如何用代碼實(shí)現(xiàn)JavaScript監(jiān)聽鍵盤事件,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:主機(jī)域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、秦州網(wǎng)站維護(hù)、網(wǎng)站推廣。在寫網(wǎng)頁的時候,常常需要監(jiān)聽鍵盤事件,讓我們來看看如何實(shí)現(xiàn)吧。
監(jiān)聽方式
鍵盤事件往往是全局監(jiān)聽,設(shè)監(jiān)聽的函數(shù)為keyboard()。
keyup事件類型。該類型觸發(fā)條件為按鍵按下去并松開。
//長按并松開只觸發(fā)一次
document.addEventListener('keyup', keyboard);
document.onkeyup = keyboard; //記得不要加括號!
keydown事件類型。該類型觸發(fā)條件為按鍵按下去。
//長按可以觸發(fā)多次
document.addEventListener('keydown', keyboard);
document.onkeydown = keyboard;
keypress事件類型。該類型觸發(fā)條件為按鍵按下去且產(chǎn)生了字符。
//長按可以觸發(fā)多次
//遇到'1','a',回車等按鍵可以觸發(fā),但del鍵,向上鍵等則不會
document.addEventListener('keypress', keyboard);
document.onkeypress = keyboard;
需要注意的是:keypress的兼容性并不是很好,比如安卓系統(tǒng)就不支持,所以盡量避免使用。
onkey___ 和 addEventListener之間,最好選后者。
另外,如果keyboard不帶參,則監(jiān)聽的事件是任何符合條件的按鍵,即只要你按了鍵盤,就會觸發(fā)事件。
監(jiān)聽具體事件(即按了哪個鍵)
上文提到的keyboard函數(shù)是可以設(shè)形參的,且在調(diào)用的時候不需加實(shí)參。
function keyboard(eve) {
...
}
document.onkeyup = keyboard; //不需要加參數(shù)和括號
此時的eve便是鍵盤事件類型的變量,它有以下屬性:
屬性 | 意義 |
---|---|
key | 事件對應(yīng)按鈕的字符 |
keyCode | 事件對應(yīng)按鈕的Unicode碼 |
which | 事件對應(yīng)按鈕的Unicode碼 |
其中,不同的瀏覽器對keyCode和which的支持情況是不同的,下文會有關(guān)于提升兼容性的方法。
舉個例子:
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。