JavaScript鍵盤(pán)事件超詳細(xì)總結(jié)
本文章簡(jiǎn)單介紹一下，JavaScript里面的鍵盤(pán)事件。
一、keydown：按下鍵盤(pán)上的任意鍵時(shí)觸發(fā)。
keydown事件在JavaScript中用于響應(yīng)鍵盤(pán)按下鍵的操作。它常用于實(shí)現(xiàn)以下場(chǎng)景：
1.捕獲用戶的按鍵操作：可以通過(guò)監(jiān)聽(tīng)keydown事件來(lái)捕獲用戶按下的鍵，并執(zhí)行相應(yīng)的操作。例如，可以通過(guò)監(jiān)聽(tīng)keydown事件來(lái)檢測(cè)用戶按下了特定的快捷鍵，然后執(zhí)行相應(yīng)的功能。
2.表單輸入控制：可以利用keydown事件對(duì)用戶的輸入進(jìn)行控制。例如，可以監(jiān)聽(tīng)keydown事件，判斷用戶按下的鍵是否是數(shù)字鍵或字母鍵，以限制輸入內(nèi)容只能是數(shù)字或字母。
Keydown事件實(shí)例：
<script type="text/javascript">
document.addEventListener("keydown", function(event) {
// 判斷按下的鍵是否是回車(chē)鍵（鍵碼為13）
if(event.keyCode === 13) {
// 執(zhí)行相應(yīng)的操作，例如提交表單或執(zhí)行搜索功能
console.log("Enter key pressed!");
// 在這里可以添加具體的邏輯代碼
}
});
</script>二、keyup：釋放鍵盤(pán)上的任意鍵時(shí)觸發(fā)。
keyup事件在JavaScript中用于響應(yīng)鍵盤(pán)釋放鍵的操作。它常用于實(shí)現(xiàn)以下場(chǎng)景：
1．捕獲用戶的鍵盤(pán)釋放操作：可以通過(guò)監(jiān)聽(tīng)keyup事件來(lái)捕獲用戶釋放的鍵，并執(zhí)行相應(yīng)的操作。例如，在游戲開(kāi)發(fā)中，可以利用keyup事件來(lái)檢測(cè)玩家釋放了特定的按鍵，然后更新游戲狀態(tài)或執(zhí)行相應(yīng)的動(dòng)作。
2.表單輸入控制：可以利用keyup事件對(duì)用戶的輸入進(jìn)行實(shí)時(shí)控制和驗(yàn)證。例如，可以監(jiān)聽(tīng)keyup事件，檢測(cè)用戶在輸入框中釋放鍵后的輸入內(nèi)容，并進(jìn)行輸入合法性檢查或?qū)崟r(shí)搜索等操作。
<script type="text/javascript">
// 監(jiān)聽(tīng)鍵盤(pán)的keyup事件
document.addEventListener("keyup", function(event) {
// 判斷釋放的鍵是否是回車(chē)鍵（鍵碼為13）
if(event.keyCode === 13) {
// 執(zhí)行相應(yīng)的操作，例如提交表單或執(zhí)行搜索功能
console.log("Enter key released!");
// 在這里可以添加具體的邏輯代碼
}
});
</script>三、keypress：在按下并釋放能夠產(chǎn)生字符的鍵時(shí)觸發(fā)（不包括功能鍵等）。
keypress事件在JavaScript中用于響應(yīng)鍵盤(pán)按鍵的操作，并在按下鍵時(shí)觸發(fā)。它常用于實(shí)現(xiàn)以下場(chǎng)景：
1.監(jiān)聽(tīng)用戶的實(shí)時(shí)輸入：可以通過(guò)監(jiān)聽(tīng)keypress事件來(lái)獲取用戶實(shí)時(shí)輸入的內(nèi)容，并進(jìn)行處理。例如，在一個(gè)即時(shí)聊天應(yīng)用中，可以利用keypress事件實(shí)時(shí)獲取用戶的輸入內(nèi)容，并將其顯示在聊天窗口中。
2.實(shí)現(xiàn)快捷鍵操作：可以利用keypress事件捕獲用戶按下特定的快捷鍵，執(zhí)行相應(yīng)的操作。例如，在一個(gè)文本編輯器中，可以使用keypress事件監(jiān)聽(tīng)用戶按下Ctrl+S組合鍵，實(shí)現(xiàn)快速保存文檔的功能。
需要注意的是，keypress事件在一些特定的情況下可能無(wú)法捕獲到所有的按鍵，例如功能鍵和組合鍵。在這些情況下，您可能需要結(jié)合其他事件（如keydown或keyup）來(lái)實(shí)現(xiàn)完整的鍵盤(pán)操作。
<script type="text/javascript">
// 監(jiān)聽(tīng)鍵盤(pán)的keypress事件
document.addEventListener("keypress", function(event) {
// 獲取按下的鍵對(duì)應(yīng)的字符
var char = String.fromCharCode(event.which);
// 顯示用戶的輸入內(nèi)容
var userInput = document.getElementById("user-input");
userInput.textContent += char;
});
</script>最后，當(dāng)執(zhí)行一次點(diǎn)擊鍵盤(pán)按鈕的行為時(shí)，以上三個(gè)事件的觸發(fā)順序?yàn)椋?/strong>
keydown -> keypress -> keyup
四、input：在文本輸入框或可編輯元素的內(nèi)容發(fā)生改變時(shí)觸發(fā)（包括鍵盤(pán)輸入、粘貼、剪切等）。
input事件在JavaScript中用于監(jiān)聽(tīng)輸入框（input）或文本區(qū)域（textarea）內(nèi)容的實(shí)時(shí)變化。它常用于實(shí)現(xiàn)以下場(chǎng)景：
1．實(shí)時(shí)搜索提示：可以通過(guò)監(jiān)聽(tīng)input事件來(lái)實(shí)現(xiàn)實(shí)時(shí)搜索提示功能。當(dāng)用戶在搜索框中輸入內(nèi)容時(shí)，每次輸入都會(huì)觸發(fā)input事件，并可以通過(guò)獲取輸入框的值進(jìn)行搜索操作，并實(shí)時(shí)顯示搜索結(jié)果。
2.表單驗(yàn)證：可以利用input事件來(lái)監(jiān)聽(tīng)用戶在表單輸入框中輸入內(nèi)容的變化，并實(shí)時(shí)進(jìn)行表單驗(yàn)證。例如，可以監(jiān)聽(tīng)input事件檢查密碼強(qiáng)度，當(dāng)用戶輸入密碼時(shí)，實(shí)時(shí)顯示密碼強(qiáng)度的提示。
以下例子實(shí)現(xiàn)了當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，實(shí)時(shí)統(tǒng)計(jì)輸入字符的數(shù)量，并顯示在頁(yè)面上。
<body>
<input type="text" id="input-field">
<div id="char-count"></div>
</body>
<script>
var inputField = document.getElementById("input-field");
var charCount = document.getElementById("char-count");
inputField.addEventListener("input", function(event) {
var inputValue = event.target.value;
var count = inputValue.length;
charCount.textContent = "字符數(shù)量：" + count;
});
</script>五、compositionstart：在開(kāi)始進(jìn)行中文輸入時(shí)觸發(fā)。
compositionstart事件在用戶開(kāi)始輸入非直接字符（如中文輸入法輸入）時(shí)觸發(fā)。它通常用于捕獲輸入法開(kāi)始輸入字符的時(shí)機(jī)，以便進(jìn)行相關(guān)處理。
需要注意的是，中文輸入監(jiān)聽(tīng)事件的監(jiān)聽(tīng)目前似乎僅適配微軟自帶的微軟拼音輸入法，像搜狗一類(lèi)的第三方輸入法并不能觸發(fā)該事件.
下面是一個(gè)例子，當(dāng)用戶使用中文輸入法輸入時(shí)，監(jiān)聽(tīng)compositionstart事件并在控制臺(tái)打印提示信息：
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionstart", function(event) {
console.log("輸入法開(kāi)始輸入字符");
});
</script>六、compositionupdate：在進(jìn)行中文輸入時(shí)，每輸入一個(gè)字符時(shí)觸發(fā)。
compositionupdate事件在用戶正在輸入非直接字符（如中文輸入法輸入）時(shí)觸發(fā)。它通常用于捕獲正在輸入的字符以及相關(guān)信息的更新。
下面是一個(gè)例子，當(dāng)用戶使用中文輸入法輸入時(shí)，監(jiān)聽(tīng)compositionupdate事件并在控制臺(tái)打印輸入的字符：
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionupdate", function(event) {
var inputText = event.data;
console.log("正在輸入字符: " + inputText);
});
</script>實(shí)際效果：
七、compositionend：在結(jié)束中文輸入時(shí)觸發(fā)。
compositionend事件在用戶完成非直接字符（如中文輸入法輸入）的輸入時(shí)觸發(fā)。它通常用于捕獲輸入完成后的字符以及相關(guān)信息。
下面是一個(gè)例子，當(dāng)用戶使用中文輸入法輸入完成后，監(jiān)聽(tīng)compositionend事件并在控制臺(tái)打印輸入的字符：
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionend", function(event) {
var inputText = event.data;
console.log("輸入完成的字符: " + inputText);
});
</script>實(shí)際效果：
附：案例（文本框提示信息）
當(dāng)用戶在文本框中輸入內(nèi)容時(shí)，文本框上面自動(dòng)顯示大號(hào)字的內(nèi)容。如果用戶輸入為空，需要隱藏大號(hào)字內(nèi)容
<style>
.search{
position: relative;
width: 300px;
margin: 100px auto;
}
.con{
display: none;
position: absolute;
top: -40px;
left: 50px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before{
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid solid solid;
border-color: #fff transparent transparent;
}
</style>
<body>
<div class="search">
<div class="con"></div>
<label>
快遞單號(hào)：
<input type="text" placeholder="請(qǐng)輸入快遞單號(hào)" class="num">
</label>
</div>
<script>
var con = document.querySelector('.con');
var numInput = document.querySelector('.num');
//2、給文本框input注冊(cè)keyup事件
numInput.addEventListener('keyup',function(e){
if(this.value===''){//若用戶沒(méi)有輸入，con隱藏
con.style.display = 'none';
}else{
con.style.display = 'block';
con.innerText = this.value
}
})
//3、給input注冊(cè)焦點(diǎn)事件
numInput.addEventListener('blur',function(){
con.style.display = 'none';
})//數(shù)去焦點(diǎn)，con隱藏
numInput.addEventListener('focus',function(){
if(this.value !== ''){
con.style.display = 'block';
}
})
</script>
</body>
總結(jié)
到此這篇關(guān)于JavaScript鍵盤(pán)事件的文章就介紹到這了,更多相關(guān)JS鍵盤(pán)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- javascript鍵盤(pán)事件全面控制腳本代碼
- js鼠標(biāo)、鍵盤(pán)事件實(shí)例代碼
- javascript 鍵盤(pán)事件總結(jié) 推薦
- js監(jiān)聽(tīng)鍵盤(pán)事件示例代碼
- js監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊和鍵盤(pán)點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁(yè)面
- JavaScript onkeydown事件入門(mén)實(shí)例(鍵盤(pán)某個(gè)按鍵被按下)
- js中獲取鍵盤(pán)事件的簡(jiǎn)單實(shí)現(xiàn)方法
- 淺談js鍵盤(pán)事件全面控制
- 使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event）
相關(guān)文章
建議大家看下JavaScript重要知識(shí)更新...2007-07-07
js實(shí)現(xiàn)數(shù)組轉(zhuǎn)換成json
本文給大家分享的是使用javascript實(shí)現(xiàn)的數(shù)組轉(zhuǎn)換json的代碼，非常簡(jiǎn)單實(shí)用，相當(dāng)于JSON.stringify(array);，有需要的小伙伴可以參考下。2015-06-06
JS實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
js 實(shí)現(xiàn)打印網(wǎng)頁(yè)中定義的部分內(nèi)容的代碼
有時(shí)候頁(yè)面需要打印功能，如果再做一個(gè)頁(yè)面不利于優(yōu)化，兩個(gè)頁(yè)面內(nèi)容一樣了，所以可以用js實(shí)現(xiàn)內(nèi)容的打印不需要的就不打印。2010-04-04
JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式，對(duì)設(shè)計(jì)模式感興趣的同學(xué)，可以參考下2021-04-04
利用BootStrap的Carousel.js實(shí)現(xiàn)輪播圖動(dòng)畫(huà)效果
這篇文章主要介紹了利用BootStrap的Carousel.js實(shí)現(xiàn)輪播圖動(dòng)畫(huà)效果的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了詳解javascript數(shù)組去重問(wèn)題，根據(jù)面試時(shí)做的一道數(shù)組去重問(wèn)題的解題思路整理的，分享給大家。2015-11-11
通過(guò)js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例
下面小編就為大家?guī)?lái)一篇通過(guò)js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來(lái)dump某些對(duì)象的詳細(xì)信息,需要的朋友可以參考下2014-12-12
JS設(shè)計(jì)模式之狀態(tài)模式概念與用法分析
這篇文章主要介紹了JS設(shè)計(jì)模式之狀態(tài)模式概念與用法,簡(jiǎn)單講述了狀態(tài)模式的概念、功能、應(yīng)用場(chǎng)景并結(jié)合javascript實(shí)例形式分析了狀態(tài)模式的簡(jiǎn)單定義及使用方法,需要的朋友可以參考下2018-02-02