JavaScript事件監(jiān)聽之鍵盤事件詳細介紹

更新時間：2024年06月07日 11:28:56 作者：a辰龍a

在實際應用中我們常常會遇到監(jiān)聽按鍵輸入和鼠標點擊事件,下面這篇文章主要給大家介紹了關于JavaScript事件監(jiān)聽之鍵盤事件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、keydown：按下鍵盤上的任意鍵時觸發(fā)。
二、keyup：釋放鍵盤上的任意鍵時觸發(fā)。
三、keypress：在按下并釋放能夠產生字符的鍵時觸發(fā)（不包括功能鍵等）。
四、input：在文本輸入框或可編輯元素的內容發(fā)生改變時觸發(fā)（包括鍵盤輸入、粘貼、剪切等）。
五、compositionstart：在開始進行中文輸入時觸發(fā)。
六、compositionupdate：在進行中文輸入時，每輸入一個字符時觸發(fā)。
七、compositionend：在結束中文輸入時觸發(fā)。
總結

本文章簡單介紹一下，JavaScript里面的鍵盤事件。

一、keydown：按下鍵盤上的任意鍵時觸發(fā)。

keydown事件在JavaScript中用于響應鍵盤按下鍵的操作。它常用于實現(xiàn)以下場景：

1.捕獲用戶的按鍵操作：可以通過監(jiān)聽keydown事件來捕獲用戶按下的鍵，并執(zhí)行相應的操作。例如，可以通過監(jiān)聽keydown事件來檢測用戶按下了特定的快捷鍵，然后執(zhí)行相應的功能。

2.表單輸入控制：可以利用keydown事件對用戶的輸入進行控制。例如，可以監(jiān)聽keydown事件，判斷用戶按下的鍵是否是數字鍵或字母鍵，以限制輸入內容只能是數字或字母。

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事件，檢測用戶在輸入框中釋放鍵后的輸入內容，并進行輸入合法性檢查或實時搜索等操作。

<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：在按下并釋放能夠產生字符的鍵時觸發(fā)（不包括功能鍵等）。

keypress事件在JavaScript中用于響應鍵盤按鍵的操作，并在按下鍵時觸發(fā)。它常用于實現(xiàn)以下場景：

1.監(jiān)聽用戶的實時輸入：可以通過監(jiān)聽keypress事件來獲取用戶實時輸入的內容，并進行處理。例如，在一個即時聊天應用中，可以利用keypress事件實時獲取用戶的輸入內容，并將其顯示在聊天窗口中。

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);

		// 顯示用戶的輸入內容
		var userInput = document.getElementById("user-input");
		userInput.textContent += char;
	});
</script>

最后，當執(zhí)行一次點擊鍵盤按鈕的行為時，以上三個事件的觸發(fā)順序為：

keydown -> keypress -> keyup

四、input：在文本輸入框或可編輯元素的內容發(fā)生改變時觸發(fā)（包括鍵盤輸入、粘貼、剪切等）。

input事件在JavaScript中用于監(jiān)聽輸入框（input）或文本區(qū)域（textarea）內容的實時變化。它常用于實現(xiàn)以下場景：

1．實時搜索提示：可以通過監(jiān)聽input事件來實現(xiàn)實時搜索提示功能。當用戶在搜索框中輸入內容時，每次輸入都會觸發(fā)input事件，并可以通過獲取輸入框的值進行搜索操作，并實時顯示搜索結果。

2.表單驗證：可以利用input事件來監(jiān)聽用戶在表單輸入框中輸入內容的變化，并實時進行表單驗證。例如，可以監(jiān)聽input事件檢查密碼強度，當用戶輸入密碼時，實時顯示密碼強度的提示。

以下例子實現(xiàn)了當用戶在輸入框中輸入內容時，實時統(tǒng)計輸入字符的數量，并顯示在頁面上。

<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 = "字符數量：" + 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>

實際效果：