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

UI艳杰提问于 2026-02-23 20:32:21 阅读 96

交互

我之前用 keyCode 判断按键，比如回车键是 13，但最近发现不工作了，控制台还报 warning。是不是被废弃了？那现在该怎么正确判断按键？

我试过改成 key 或 code，但有时候还是拿不到预期的值，特别是在不同浏览器里表现还不一样，有点懵。

<template>
  <input @keydown="handleKeydown" />
</template>

<script>
export default {
  methods: {
    handleKeydown(e) {
      if (e.keyCode === 13) { // 这里现在不推荐用了？
        console.log('按了回车')
      }
    }
  }
}
</script>

我来解答赞 7 收藏

反馈

2 条解答

Designer°书錦 Lv1

keyCode 确实被废弃了，Vue 3 会直接报 warning。改成用修饰符最省事：

或者在方法里用 e.key === 'Enter' 判断。Vue 支持的修饰符有 enter、tab、delete、esc、space、up、down、left、right 这些，浏览器兼容性基本没问题，比以前用 keyCode 靠谱多了。

2026-03-14 14:14

东方景苑 Lv1

应该是被废弃了，keyCode 在现代浏览器里已经不推荐用了，而且 Vue 3 里也移除了对它的自动映射支持。
现在统一用 e.key 判断逻辑按键（比如 Enter），用 e.code 判断物理按键（比如 Enter 或 NumpadEnter），注意区分大小写和平台差异。

改法如下：

export default {

  methods: {

    handleKeydown(e) {

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

        console.log('按了回车')

      }

    }

  }

}

如果要兼容数字小键盘回车，可以用 e.code === 'Enter'，更稳妥。
别再用 keyCode 了，它连 Firefox 都开始弃用了。

2026-02-23 21:04