onkeydown事件是JavaScript中用於監聽鍵盤按鍵按下動作的事件。當用户按下鍵盤上的任意鍵時，會觸發這個事件。與onkeypress事件不同的是，onkeydown事件會響應所有按鍵（包括功能鍵如Ctrl、Shift、方向鍵等），而不僅僅是字符鍵。

事件觸發順序

鍵盤按鍵操作會按以下順序觸發事件：

onkeydown -> onkeypress -> onkeyup

事件綁定方式

1. HTML屬性方式（不推薦）

<input type="text" onkeydown="handleKeyDown(event)">

2. JavaScript屬性方式

document.onkeydown = function(event) {
  // 處理邏輯
};

3. 推薦的addEventListener方式（最佳實踐）

document.addEventListener('keydown', function(event) {
  // 處理邏輯
});

事件對象的關鍵屬性

屬性

説明

示例

event.key

獲取按鍵名稱（如"Enter", "a", "ArrowUp"）

event.key === 'Enter'

event.keyCode

獲取按鍵的ASCII碼值（瀏覽器差異：IE用keyCode，其他用which）

event.keyCode === 13（Enter鍵）

event.which

獲取按鍵編碼值（其他瀏覽器使用）

event.which === 13

event.ctrlKey

檢測是否按下了Ctrl鍵

event.ctrlKey

event.shiftKey

檢測是否按下了Shift鍵

event.shiftKey

代碼例子

示例1：簡單按鍵檢測

<!DOCTYPE html>
<html>
<head>
  <title>onkeydown示例</title>
</head>
<body>
  <h2>按任意鍵查看按鍵信息</h2>
  <input type="text" placeholder="按任意鍵測試">
  
  <script>
    // 使用推薦的addEventListener方式
    document.addEventListener('keydown', function(event) {
      console.log(`按鍵被按下: ${event.key} (keyCode: ${event.keyCode})`);
      
      // 檢測Enter鍵
      if (event.key === 'Enter') {
        alert('你按下了Enter鍵！');
      }
      
      // 檢測Ctrl+Enter組合鍵
      if (event.ctrlKey && event.key === 'Enter') {
        alert('你按下了Ctrl+Enter組合鍵！');
      }
    });
  </script>
</body>
</html>

示例2：輸入框限制輸入數字

<!DOCTYPE html>
<html>
<head>
  <title>輸入框限制數字示例</title>
</head>
<body>
  <h2>輸入框限制輸入數字</h2>
  <input type="text" placeholder="只能輸入字母">
  
  <script>
    document.querySelector('input').addEventListener('keydown', function(event) {
      // 檢測是否是數字鍵
      var isDigit = /^[0-9]$/.test(event.key);
      
      // 如果是數字鍵，阻止默認行為
      if (isDigit) {
        event.preventDefault();
        alert('輸入框不允許輸入數字！');
      }
    });
  </script>
</body>
</html>

示例3：使用鍵盤控制焦點（上下左右鍵）

<!DOCTYPE html>
<html>
<head>
  <title>鍵盤焦點控制示例</title>
</head>
<body>
  <h2>使用方向鍵控制焦點</h2>
  <div>
    <input type="text" placeholder="輸入框1">
    <input type="text" placeholder="輸入框2">
    <input type="text" placeholder="輸入框3">
  </div>
  
  <script>
    document.addEventListener('keydown', function(event) {
      const inputs = document.querySelectorAll('input');
      const focusedElement = document.activeElement;
      
      let currentIndex = Array.from(inputs).indexOf(focusedElement);
      
      if (currentIndex === -1) return; // 沒有焦點元素
      
      let nextIndex = currentIndex;
      
      switch (event.key) {
        case 'ArrowUp':
          nextIndex = Math.max(0, currentIndex - 1);
          break;
        case 'ArrowDown':
          nextIndex = Math.min(inputs.length - 1, currentIndex + 1);
          break;
        case 'ArrowLeft':
          nextIndex = Math.max(0, currentIndex - 1);
          break;
        case 'ArrowRight':
          nextIndex = Math.min(inputs.length - 1, currentIndex + 1);
          break;
        default:
          return;
      }
      
      inputs[nextIndex].focus();
      event.preventDefault(); // 阻止默認行為
    });
  </script>
</body>
</html>

注意事項

  1. 瀏覽器兼容性：不同瀏覽器對keyCode和which的處理略有差異，推薦使用event.key獲取按鍵名稱。
  2. 事件冒泡：鍵盤事件會冒泡，可以使用event.stopPropagation()阻止事件傳播。
  3. 輸入法問題：在中文輸入法環境下，keydown事件可能會在輸入法編輯器（IME）中觸發多次，可以使用event.code來獲取更準確的按鍵信息。
  4. 性能考慮：如果處理函數執行時間較長，可能會導致連續按鍵時的延遲，建議優化處理函數或使用防抖（debounce）和節流（throttle）技術。