现代浏览器标准中已不再使用keyCode属性，而改用event.key，但是掌握常用按键及其传统keyCode值对我们的日常开发仍会有很大的帮助，本文分享了JavaScript 中提供的所有键盘按键和 keyCode值。

event.key和keyCode的区别

  • event.key 提供了按下的键的值，使代码更容易理解和维护。例如，按下 A 键会产生"a "或"A"，这取决于是否同时按下了 shift 键。
  • keyCode是一个数值，已被弃用，未来的网络标准可能不再支持。它的可读性较差，如果不参考代码列表，很难确定该值代表哪个按键。

常用键值及其keyCode

下面列出了现代开发实践中的event.key值及其相应的keyCode值（已弃用），以供参考：

字母及数字键

  • A-Z：event.key 为"a"至"z"（小写不含 shift 键，大写含 shift 键），keyCode为65至90
  • 0-9：event.key 为"0"至"9"，顶行数字的keyCode为48至57

特殊字符（因键盘布局而异）

  • 空格：event.key 为"" ，keyCode为32
  • 回车：event.key 为 "Enter"，keyCode为13
  • Escape: event.key 为"Escape"，keyCode为27

控制键

  • Shift：event.key为"Shift"，keyCode为16
  • Control(Ctrl)：event.key为"Control"，keyCode为17
  • Alt：event.key为"Alt"，keyCode为18
  • Backspace：event.key为"Backspace"，keyCode为8
  • Tab：event.key为"Tab"，keyCode为9

箭头键

  • 左：event.key为"ArrowLeft"，keyCode为37
  • 上：event.key为"ArrowUp"，keyCode为38
  • 右：event.key为"ArrowRight"，keyCode为39
  • 下：event.key为"ArrowDown"，keyCode为40

功能键

  • F1-F12：event.key为"F1"至"F12"，keyCode为112至123

检测按键操作事件

检测按键动作时，请使用event.key：

document.addEventListener('keydown', (event) => {
    console.log(`Key pressed: ${event.key}`);
});

为什么要从keyCode迁移到event.key

从keyCode转向event.key有几个原因：

  • 可读性：event.key更易于理解，无需参考对应文档。
  • 国际化：event.key对按键物理位置的依赖性较小，因此更适合国际应用。
  • 过时和未来支持： 现代网络标准建议不要使用keyCode，因为未来的浏览器和设备可能不支持它。