鍵盤keyCode詳解

一、keyCode基礎知識

keyCode是瀏覽器所支持的鍵盤按鍵編碼，是一個由數字組成的值，代表了不同的鍵位。通過keyCode，我們可以獲取用戶所按下的按鍵信息，從而實現用戶的交互操作。

在JavaScript中，我們可以通過事件對象來獲取keyCode的值。比如，在keydown或者keyup事件當中，我們可以使用event.keyCode獲取鍵盤按鍵編碼對應的數字值。當然，我們也可以通過event.which獲取鍵盤按鍵編碼對應的數字值。

需要注意的是，keyCode值是與鍵盤布局相關的，不同的鍵盤布局所對應的keyCode是不同的。所以，在實際開發中，我們需要對不同的鍵盤布局進行兼容。

二、常用的keyCode值

在實際開發中，我們經常需要用到一些常用的keyCode值，這些keyCode值對於實現一些交互操作非常有幫助。

比如，在表格組件中，我們經常需要響應上下左右箭頭鍵進行表格的移動；在文本框組件中，我們經常需要響應回車鍵進行提交操作。下面是一些常用的keyCode值：

// 常用的keyCode值
const keyCode = {
  BACKSPACE: 8,  // 退格鍵
  TAB: 9,        // 製表鍵
  ENTER: 13,     // 回車鍵
  SHIFT: 16,     // Shift鍵
  CTRL: 17,      // Ctrl鍵
  ALT: 18,       // Alt鍵
  CAPS_LOCK: 20, // 大寫鎖定鍵
  ESC: 27,       // ESC鍵
  SPACE: 32,     // 空格鍵
  PAGE_UP: 33,   // PageUp鍵
  PAGE_DOWN: 34, // PageDown鍵
  END: 35,       // End鍵
  HOME: 36,      // Home鍵
  LEFT: 37,      // Left鍵
  UP: 38,        // Up鍵
  RIGHT: 39,     // Right鍵
  DOWN: 40,      // Down鍵
  DELETE: 46     // Delete鍵
}

三、兼容不同鍵盤布局

如上所述，不同的鍵盤布局所對應的keyCode是不同的，因此，在編寫代碼時，要考慮到兼容不同鍵盤布局的情況。

我們可以使用event.key或者event.code來獲取當前按下的鍵的鍵盤布局相關信息。event.key返回的是表示按下的鍵的字元串，而event.code則返回的是表示按下的鍵的標識符，這兩個值在不同鍵盤布局下是不變的。

下面是一個獲取鍵盤布局信息並進行兼容的示例：

document.addEventListener('keydown', function(event) {
  const keyCode = event.keyCode || event.which;
  const key = event.key || event.code;
  
  switch(key) {
    case 'Enter':
      // 回車鍵
      console.log('Enter key pressed');
      break;
    case 'ArrowLeft':
      // 左箭頭鍵
      console.log('ArrowLeft key pressed');
      break;
    case 'ArrowDown':
      // 下箭頭鍵
      console.log('ArrowDown key pressed');
      break;
    case 'ArrowRight':
      // 右箭頭鍵
      console.log('ArrowRight key pressed');
      break;
    case 'ArrowUp':
      // 上箭頭鍵
      console.log('ArrowUp key pressed');
      break;
    default:
      // 其他按鍵
      console.log('KeyCode: ' + keyCode + ', key: ' + key);
      break;
  }
});

四、keyCode的限制和安全性

在一些安全性較高的場景下，需要限制用戶輸入一些特定的字元或者鍵位。比如，密碼框中通常不允許用戶輸入特殊符號，複製密碼的時候也需要禁用Ctrl+C快捷鍵。

為了實現這些限制，我們可以通過檢查用戶所按下的keyCode值來判斷用戶是否輸入了被限制的字元或者鍵位。例如，我們可以通過檢查keyCode值來禁用Ctrl+C的快捷鍵：

document.addEventListener('keydown', function(event) {
  if ((event.ctrlKey || event.metaKey) && (event.keyCode === 67 || event.keyCode === 86)) {
    event.preventDefault(); // 阻止默認事件
  }
});

當用戶按下Ctrl+C或者Ctrl+V時，會觸發瀏覽器默認的複製、粘貼事件。在上述示例中，我們檢查了event.ctrlKey和event.metaKey，這兩個值分別對應了操作系統中的Ctrl和Command鍵。如果用戶同時按下了Ctrl鍵並且按下了C或者V鍵，就會執行event.preventDefault()來阻止瀏覽器默認的事件，從而達到禁用快捷鍵的目的。