onkeydown是JavaScript中用於監聽鍵盤按鍵按下事件的常用方法。當用户按下鍵盤上的任意鍵時，會觸發onkeydown事件，無論該鍵是否有字符與之關聯。

基本概念

  • 觸發時機：用户按下鍵盤按鍵時立即觸發（無需等待按鍵釋放）
  • 事件順序：onkeydown → onkeypress → onkeyup
  • 支持範圍：能識別所有按鍵，包括功能鍵（Ctrl、Shift、箭頭鍵等）
  • 與onkeypress的區別：onkeydown在按鍵按下時觸發，onkeypress在按鍵按下並釋放後觸發

代碼示例

1. 基本使用

// HTML中使用
<input type="text" onkeydown="handleKeyDown(event)">

// JavaScript中使用
document.getElementById('myInput').onkeydown = function(event) {
  console.log('按鍵按下:', event.key);
};

// 或使用addEventListener
document.getElementById('myInput').addEventListener('keydown', function(event) {
  console.log('按鍵按下:', event.key);
});

2. 檢測特定按鍵（如Enter鍵）

// 檢測回車鍵（keyCode為13）
document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    console.log('您按下了回車鍵');
    event.preventDefault(); // 阻止回車鍵的默認行為（如表單提交）
  }
});

// 使用更現代的event.key（推薦）
document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('您按下了回車鍵');
    event.preventDefault();
  }
});

3. 實用示例：模擬京東搜索框聚焦功能

// 當按下's'鍵時，將焦點移動到搜索框
document.addEventListener('keydown', function(event) {
  // 檢測是否按下了's'鍵（keyCode 83）
  if (event.keyCode === 83) {
    // 獲取搜索框元素
    const searchInput = document.getElementById('search-input');
    
    // 如果搜索框存在，將其聚焦
    if (searchInput) {
      searchInput.focus();
      console.log('搜索框已聚焦');
    }
  }
});

4. 阻止默認行為

document.addEventListener('keydown', function(event) {
  // 阻止空格鍵的默認行為（如頁面滾動）
  if (event.key === ' ') {
    event.preventDefault();
    console.log('空格鍵已阻止');
  }
  
  // 阻止回車鍵的默認行為
  if (event.key === 'Enter') {
    event.preventDefault();
    console.log('回車鍵已阻止');
  }
});

5. 處理功能鍵

document.addEventListener('keydown', function(event) {
  // 檢測Ctrl+C組合鍵
  if (event.ctrlKey && event.key === 'c') {
    console.log('您按下了Ctrl+C');
    event.preventDefault(); // 阻止默認的複製行為
  }
  
  // 檢測Shift+Enter組合鍵
  if (event.shiftKey && event.key === 'Enter') {
    console.log('您按下了Shift+Enter');
  }
});

與onkeypress和onkeyup的對比

事件

觸發時機

識別功能鍵

字母大小寫區分