Table of contents
1. Keydown: Triggered when any key on the keyboard is pressed.
2. Keyup: Triggered when any key on the keyboard is released.
5. Compositionstart: Triggered when Chinese input begins.
6. Compositionupdate: When inputting Chinese, it is triggered every time a character is entered.
7. Compositionend: Triggered when Chinese input ends.
This article briefly introduces keyboard events in JavaScript.
1. Keydown: Triggered when any key on the keyboard is pressed.
The keydown event is used in JavaScript to respond to a keyboard key press. It is often used to implement the following scenarios:
1. Capture the user's key operations: You can capture the keys pressed by the user by listening to the keydown event and perform the corresponding operations. For example, you can detect that the user pressed a specific shortcut key by listening to the keydown event, and then perform the corresponding function.
2. Form input control: You can use the keydown event to control user input. For example, you can listen to the keydown event to determine whether the key pressed by the user is a numeric key or a letter key, so as to limit the input content to only numbers or letters.
Keydown event example:
<script type="text/javascript">
document.addEventListener("keydown", function(event) {
// 判断按下的键是否是回车键（键码为13）
if(event.keyCode === 13) {
// 执行相应的操作，例如提交表单或执行搜索功能
console.log("Enter key pressed!");
// 在这里可以添加具体的逻辑代码
}
});
</script>2. Keyup: Triggered when any key on the keyboard is released.
The keyup event is used in JavaScript to respond to the keyboard releasing a key. It is often used to implement the following scenarios:
1. Capture the user's keyboard release operation: You can capture the keys released by the user by listening to the keyup event and perform corresponding operations. For example, in game development, the keyup event can be used to detect when the player releases a specific key, and then update the game state or perform corresponding actions.
2. Form input control: Keyup events can be used to control and verify user input in real time. For example, you can listen to the keyup event, detect the user's input after releasing the key in the input box, and perform operations such as input legality checking or real-time search.
<script type="text/javascript">
// 监听键盘的keyup事件
document.addEventListener("keyup", function(event) {
// 判断释放的键是否是回车键（键码为13）
if(event.keyCode === 13) {
// 执行相应的操作，例如提交表单或执行搜索功能
console.log("Enter key released!");
// 在这里可以添加具体的逻辑代码
}
});
</script>3. Keypress: Triggered when a key that can generate characters is pressed and released (excluding function keys, etc.).
The keypress event is used in JavaScript to respond to keyboard key operations and is triggered when a key is pressed. It is often used to implement the following scenarios:
1. Monitor the user's real-time input: You can obtain the user's real-time input by listening to the keypress event and process it. For example, in an instant chat application, the keypress event can be used to obtain the user's input in real time and display it in the chat window.
2. Implement shortcut key operations: You can use the keypress event to capture the user pressing a specific shortcut key and perform the corresponding operation. For example, in a text editor, you can use the keypress event to listen for the user to press the Ctrl+S key combination to quickly save the document.
It should be noted that the keypress event may not be able to capture all key presses under certain circumstances, such as function keys and key combinations. In these cases, you may need to combine other events (such as keydown or keyup) to achieve full keyboard operation.
<script type="text/javascript">
// 监听键盘的keypress事件
document.addEventListener("keypress", function(event) {
// 获取按下的键对应的字符
var char = String.fromCharCode(event.which);
// 显示用户的输入内容
var userInput = document.getElementById("user-input");
userInput.textContent += char;
});
</script>Finally, when the behavior of clicking a keyboard button is executed, the triggering sequence of the above three events is:
keydown -> keypress -> keyup
4. Input: Triggered when the content of the text input box or editable element changes (including keyboard input, paste, cut, etc.).
The input event is used in JavaScript to monitor real-time changes in the content of the input box (input) or text area (textarea). It is often used to implement the following scenarios:
1. Real-time search prompts: You can implement real-time search prompts by listening to input events. When the user enters content in the search box, the input event will be triggered for each input, and the search operation can be performed by obtaining the value of the input box, and the search results will be displayed in real time.
2. Form verification: You can use the input event to monitor changes in the user's input content in the form input box and perform form verification in real time. For example, you can listen to the input event to check the password strength, and when the user enters the password, the password strength prompt is displayed in real time.
The following example implements real-time counting of the number of input characters when the user enters content in the input box, and displays it on the page.
<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>5. Compositionstart: Triggered when Chinese input begins.
The compositionstart event is triggered when the user starts inputting indirect characters (such as Chinese input method input). It is usually used to capture the timing when the input method starts inputting characters for related processing.
It should be noted that the monitoring of Chinese input monitoring events currently seems to only be adapted to Microsoft's own Microsoft Pinyin input method. Third-party input methods such as Sogou cannot trigger this event .
The following is an example. When the user inputs using the Chinese input method, listen to the compositionstart event and print prompt information on the console:
<body>
<input type="text" id="input-field">
</body>
<script>
var inputField = document.getElementById("input-field");
inputField.addEventListener("compositionstart", function(event) {
console.log("输入法开始输入字符");
});
</script>6. Compositionupdate: When inputting Chinese, it is triggered every time a character is entered.
The compositionupdate event is triggered when the user is inputting indirect characters (such as Chinese input method input). It is typically used to capture characters being entered and updates to related information.
The following is an example. When the user inputs using the Chinese input method, listen to the compositionupdate event and print the entered characters on the console:
<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>actual effect:
7. Compositionend: Triggered when Chinese input ends.
The compositionend event is triggered when the user completes the input of indirect characters (such as Chinese input method input). It is usually used to capture characters and related information after input is completed.
The following is an example. When the user completes input using the Chinese input method, listen to the compositionend event and print the entered characters on the console:
<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>actual effect:
