JavaScript鍵盤事件超詳細總結
本文章簡單介紹一下，JavaScript里面的鍵盤事件。
一、keydown：按下鍵盤上的任意鍵時觸發(fā)。
keydown事件在JavaScript中用于響應鍵盤按下鍵的操作。它常用于實現(xiàn)以下場景：
1.捕獲用戶的按鍵操作：可以通過監(jiān)聽keydown事件來捕獲用戶按下的鍵，并執(zhí)行相應的操作。例如，可以通過監(jiān)聽keydown事件來檢測用戶按下了特定的快捷鍵，然后執(zhí)行相應的功能。
2.表單輸入控制：可以利用keydown事件對用戶的輸入進行控制。例如，可以監(jiān)聽keydown事件，判斷用戶按下的鍵是否是數(shù)字鍵或字母鍵，以限制輸入內(nèi)容只能是數(shù)字或字母。
Keydown事件實例：
<script type="text/javascript">
document.addEventListener("keydown", function(event) {
// 判斷按下的鍵是否是回車鍵（鍵碼為13）
if(event.keyCode === 13) {
// 執(zhí)行相應的操作，例如提交表單或執(zhí)行搜索功能
console.log("Enter key pressed!");
// 在這里可以添加具體的邏輯代碼
}
});
</script>二、keyup：釋放鍵盤上的任意鍵時觸發(fā)。
keyup事件在JavaScript中用于響應鍵盤釋放鍵的操作。它常用于實現(xiàn)以下場景：
1．捕獲用戶的鍵盤釋放操作：可以通過監(jiān)聽keyup事件來捕獲用戶釋放的鍵，并執(zhí)行相應的操作。例如，在游戲開發(fā)中，可以利用keyup事件來檢測玩家釋放了特定的按鍵，然后更新游戲狀態(tài)或執(zhí)行相應的動作。
2.表單輸入控制：可以利用keyup事件對用戶的輸入進行實時控制和驗證。例如，可以監(jiān)聽keyup事件，檢測用戶在輸入框中釋放鍵后的輸入內(nèi)容，并進行輸入合法性檢查或實時搜索等操作。
<script type="text/javascript">
// 監(jiān)聽鍵盤的keyup事件
document.addEventListener("keyup", function(event) {
// 判斷釋放的鍵是否是回車鍵（鍵碼為13）
if(event.keyCode === 13) {
// 執(zhí)行相應的操作，例如提交表單或執(zhí)行搜索功能
console.log("Enter key released!");
// 在這里可以添加具體的邏輯代碼
}
});
</script>三、keypress：在按下并釋放能夠產(chǎn)生字符的鍵時觸發(fā)（不包括功能鍵等）。
keypress事件在JavaScript中用于響應鍵盤按鍵的操作，并在按下鍵時觸發(fā)。它常用于實現(xiàn)以下場景：
1.監(jiān)聽用戶的實時輸入：可以通過監(jiān)聽keypress事件來獲取用戶實時輸入的內(nèi)容，并進行處理。例如，在一個即時聊天應用中，可以利用keypress事件實時獲取用戶的輸入內(nèi)容，并將其顯示在聊天窗口中。
2.實現(xiàn)快捷鍵操作：可以利用keypress事件捕獲用戶按下特定的快捷鍵，執(zhí)行相應的操作。例如，在一個文本編輯器中，可以使用keypress事件監(jiān)聽用戶按下Ctrl+S組合鍵，實現(xiàn)快速保存文檔的功能。
需要注意的是，keypress事件在一些特定的情況下可能無法捕獲到所有的按鍵，例如功能鍵和組合鍵。在這些情況下，您可能需要結合其他事件（如keydown或keyup）來實現(xiàn)完整的鍵盤操作。
<script type="text/javascript">
// 監(jiān)聽鍵盤的keypress事件
document.addEventListener("keypress", function(event) {
// 獲取按下的鍵對應的字符
var char = String.fromCharCode(event.which);
// 顯示用戶的輸入內(nèi)容
var userInput = document.getElementById("user-input");
userInput.textContent += char;
});
</script>最后，當執(zhí)行一次點擊鍵盤按鈕的行為時，以上三個事件的觸發(fā)順序為：
keydown -> keypress -> keyup
四、input：在文本輸入框或可編輯元素的內(nèi)容發(fā)生改變時觸發(fā)（包括鍵盤輸入、粘貼、剪切等）。
input事件在JavaScript中用于監(jiān)聽輸入框（input）或文本區(qū)域（textarea）內(nèi)容的實時變化。它常用于實現(xiàn)以下場景：
1．實時搜索提示：可以通過監(jiān)聽input事件來實現(xiàn)實時搜索提示功能。當用戶在搜索框中輸入內(nèi)容時，每次輸入都會觸發(fā)input事件，并可以通過獲取輸入框的值進行搜索操作，并實時顯示搜索結果。
2.表單驗證：可以利用input事件來監(jiān)聽用戶在表單輸入框中輸入內(nèi)容的變化，并實時進行表單驗證。例如，可以監(jiān)聽input事件檢查密碼強度，當用戶輸入密碼時，實時顯示密碼強度的提示。
以下例子實現(xiàn)了當用戶在輸入框中輸入內(nèi)容時，實時統(tǒng)計輸入字符的數(shù)量，并顯示在頁面上。
<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：在開始進行中文輸入時觸發(fā)。
compositionstart事件在用戶開始輸入非直接字符（如中文輸入法輸入）時觸發(fā)。它通常用于捕獲輸入法開始輸入字符的時機，以便進行相關處理。
需要注意的是，中文輸入監(jiān)聽事件的監(jiān)聽目前似乎僅適配微軟自帶的微軟拼音輸入法，像搜狗一類的第三方輸入法并不能觸發(fā)該事件.
下面是一個例子，當用戶使用中文輸入法輸入時，監(jiān)聽compositionstart事件并在控制臺打印提示信息：
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionstart", function(event) {
console.log("輸入法開始輸入字符");
});
</script>六、compositionupdate：在進行中文輸入時，每輸入一個字符時觸發(fā)。
compositionupdate事件在用戶正在輸入非直接字符（如中文輸入法輸入）時觸發(fā)。它通常用于捕獲正在輸入的字符以及相關信息的更新。
下面是一個例子，當用戶使用中文輸入法輸入時，監(jiān)聽compositionupdate事件并在控制臺打印輸入的字符：
<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>實際效果：
七、compositionend：在結束中文輸入時觸發(fā)。
compositionend事件在用戶完成非直接字符（如中文輸入法輸入）的輸入時觸發(fā)。它通常用于捕獲輸入完成后的字符以及相關信息。
下面是一個例子，當用戶使用中文輸入法輸入完成后，監(jiān)聽compositionend事件并在控制臺打印輸入的字符：
<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>實際效果：
附：案例（文本框提示信息）
當用戶在文本框中輸入內(nèi)容時，文本框上面自動顯示大號字的內(nèi)容。如果用戶輸入為空，需要隱藏大號字內(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>
快遞單號：
<input type="text" placeholder="請輸入快遞單號" class="num">
</label>
</div>
<script>
var con = document.querySelector('.con');
var numInput = document.querySelector('.num');
//2、給文本框input注冊keyup事件
numInput.addEventListener('keyup',function(e){
if(this.value===''){//若用戶沒有輸入，con隱藏
con.style.display = 'none';
}else{
con.style.display = 'block';
con.innerText = this.value
}
})
//3、給input注冊焦點事件
numInput.addEventListener('blur',function(){
con.style.display = 'none';
})//數(shù)去焦點，con隱藏
numInput.addEventListener('focus',function(){
if(this.value !== ''){
con.style.display = 'block';
}
})
</script>
</body>
總結
到此這篇關于JavaScript鍵盤事件的文章就介紹到這了,更多相關JS鍵盤事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了詳解JavaScript按概率隨機生成事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了基于js Canvas實現(xiàn)二次貝塞爾曲線，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南
這篇文章主要給大家介紹了關于利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南的相關資料,適配最新微信小程序隱私協(xié)議開發(fā)指南,兼容uniapp版本,需要的朋友可以參考下2023-12-12
JavaScript setinterval延遲一秒解決方案
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
js函數(shù)與php函數(shù)的區(qū)別實例淺析
這篇文章主要介紹了js函數(shù)與php函數(shù)的區(qū)別,以實例形式較為簡單的分析了js函數(shù)與php函數(shù)語法及應用上的不同點,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄鷍s封裝的一些jquery方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
基于css3新屬性transform及原生js實現(xiàn)鼠標拖動3d立方體旋轉
這篇文章主要介紹了基于css3新屬性transform及原生js實現(xiàn)鼠標拖動3d立方體旋轉 的相關資料,需要的朋友可以參考下2016-06-06
上一篇文章，我們講解了邊緣梯度計算函數(shù)，這篇文章我們來了解圖像金字塔;圖像金字塔被廣泛用于計算機視覺應用中;圖像金字塔是一個圖像集合，集合中所有的圖像都源于同一個原始圖像，而且是通過對原始圖像連續(xù)降采樣獲得的2013-01-01
js 遞歸json樹實現(xiàn)根據(jù)子id查父id的方法分析
這篇文章主要介紹了js 遞歸json樹實現(xiàn)根據(jù)子id查父id的方法,結合實例形式分析了JavaScript遞歸遍歷json進行數(shù)據(jù)查詢的相關操作技巧,需要的朋友可以參考下2019-11-11
Typescript高級類型Record,Partial,Readonly詳解
這篇文章主要介紹了Typescript高級類型Record,Partial,Readonly等介紹,keyof將一個類型的屬性名全部提取出來當做聯(lián)合類型，本文通過實例代碼給大家詳細講解需要的朋友可以參考下2022-11-11