为什么在 Vue 里监听键盘事件时 keyCode 不生效？

西门丽苹提问于 2026-03-10 12:04:22 阅读 3

交互

我最近在用 Vue 做一个快捷键功能，想通过 keyCode 判断按的是哪个键，但发现它一直是 undefined。明明以前这么写是没问题的，是不是现在浏览器不支持了？

我试过在 @keydown 里打印 event 对象，keyCode 确实没了，但 key 和 code 还在。那我该怎么兼容或者正确判断按键呢？

<template>
  <input @keydown="handleKeydown" placeholder="按任意键试试" />
</template>

<script>
export default {
  methods: {
    handleKeydown(e) {
      console.log('keyCode:', e.keyCode); // 输出 undefined
      console.log('key:', e.key);
    }
  }
}
</script>

键盘交互

我来解答赞 0 收藏

反馈

1 条解答

Mr.可欣 Lv1

啊这个问题我也踩过坑。keyCode确实被废弃了，现在要用e.key或e.code替代。性能上没区别，但语义更清晰。

改法很简单，把keyCode换成key就行：

handleKeydown(e) {

  if (e.key === 'Enter') {

    // 处理回车键

  }

  if (e.key === 'Escape') {

    // 处理ESC键  

  }

}

key和code的区别：
- key返回的是按键的值，比如'A'、'Enter'
- code返回的是物理键位，比如'KeyA'、'EnterLeft'

如果你非要兼容老旧浏览器（虽然真没必要），可以加个polyfill或者这样写：

const keyCode = e.keyCode || e.which || e.key.charCodeAt(0);

不过说真的，现在连IE都死了，直接拥抱新标准吧。我上周还看到有人用keyCode被同事嘲笑代码像化石...

2026-03-10 12:05