如何简便检测按键事件所产生的对应输入字符？

嘿，这个问题我太有共鸣了——以前靠keyCode搭配shiftKey这类修饰键判断输入字符，不仅代码繁琐，还容易因为键盘布局不同出问题！现在有个更优雅的解决方案：直接使用KeyboardEvent.key属性。

为什么event.key更好？ #

它会直接返回按键实际产生的字符，完全不需要你手动判断修饰键或者记住那些乱七八糟的keyCode数值：

• 输入小写字母v时，event.key === 'v'
• 按住Shift输入#时，event.key === '#'（不用再写keyCode === 51 && shiftKey这种绕弯逻辑）
• 输入大写V时，event.key === 'V'，自动帮你区分大小写

代码示例对比 #

原来的繁琐写法：

document.addEventListener('keydown', (e) => {
  if (e.keyCode === 86) {
    console.log('输入了v');
  } else if (e.keyCode === 51 && e.shiftKey) {
    console.log('输入了#');
  }
});

用event.key的简洁写法：

document.addEventListener('keydown', (e) => {
  if (e.key === 'v') {
    console.log('输入了v');
  } else if (e.key === '#') {
    console.log('输入了#');
  }
});

额外提示 #

1. 对于非字符类按键（比如Enter、Backspace、箭头键），event.key会返回对应的按键名称，比如'Enter'、'Backspace'，这也比记keyCode直观得多。
2. 兼容性方面，现在Chrome、Firefox、Edge等主流浏览器都完全支持，只有IE 11及更早版本不支持，如果你的项目不需要兼容老IE，完全可以放心用。

内容的提问来源于stack exchange，提问作者user9062413