按鍵事件處理(Handling Keypress Events) | Javascript

我們將在這篇文章中介紹 JavaScript 中按鍵事件處理的方式。

按鍵事件處理:

  1. addEventListener: 使用addEventListener方法將按鍵事件處理程序附加到元素。
document.addEventListener('keypress', function(event) {
  // 在此處添加按鍵事件處理邏輯
  console.log('按下的按鍵:', event.key);
});
  1. 按鍵代碼: 存取按鍵代碼以識別事件期間按下的特定按鍵。
document.addEventListener('keypress', function(event) {
  if (event.keyCode === 13) {
    console.log('按下Enter鍵');
  }
});
  1. 輸入元素: 在特定輸入元素上處理按鍵事件以進行用戶交互。
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鍵');
  }
});