键盘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()来阻止浏览器默认的事件，从而达到禁用快捷键的目的。