按鍵事件處理(Handling Keypress Events) | Javascript
我們將在這篇文章中介紹 JavaScript 中按鍵事件處理的方式。
按鍵事件處理:
- addEventListener: 使用addEventListener方法將按鍵事件處理程序附加到元素。
document.addEventListener('keypress', function(event) {
// 在此處添加按鍵事件處理邏輯
console.log('按下的按鍵:', event.key);
});
- 按鍵代碼: 存取按鍵代碼以識別事件期間按下的特定按鍵。
document.addEventListener('keypress', function(event) {
if (event.keyCode === 13) {
console.log('按下Enter鍵');
}
});
- 輸入元素: 在特定輸入元素上處理按鍵事件以進行用戶交互。
const myInput = document.getElementById('myInput');
myInput.addEventListener('keypress', function(event) {
// 在此處添加特定輸入的按鍵事件處理邏輯
});
示範代碼:
// 附加全局按鍵事件處理程序
document.addEventListener('keypress', function(event) {
// 記錄按下的按鍵
console.log('按下的按鍵:', event.key);
});
// 在特定輸入元素上處理按鍵事件
const myInput = document.getElementById('myInput');
myInput.addEventListener('keypress', function(event) {
// 防止某些按鍵的默認操作
if (event.key === 'Enter') {
event.preventDefault();
console.log('在輸入字段中按下Enter鍵');
}
});
Tags