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

Prog.秀莲提问于 2026-02-26 13:29:21 阅读 102

交互

最近在做一个搜索框的回车提交功能，发现用 event.keyCode === 13 判断回车键没反应了。查了下文档说 keyCode 已废弃，但换成 key 或 code 又不确定怎么写才兼容。我现在的代码是这样的：

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

<script>
export default {
  methods: {
    handleKeydown(e) {
      if (e.keyCode === 13) { // 这里不触发
        console.log('Enter pressed')
      }
    }
  }
}
</script>

Chrome 控制台还警告说 keyCode 已被弃用，那现在正确的做法到底该用啥？

我来解答赞 3 收藏

反馈

1 条解答

西门爱红 Lv1

keyCode 确实被废弃了，Chrome 控制台的警告不是吓唬人，现在得用 key 或 code，但两者行为不一样，得搞清楚。

key 是逻辑键值，比如 "Enter"、"a"、"Shift"，不受键盘布局影响（美式键盘的 Enter 和中文键盘的 Enter 都是 "Enter"），适合做功能键判断；code 是物理键位，比如 "Enter"、"KeyA"，受键盘布局影响（德语键盘上 Z 和 Y 的位置换过来了，code 就跟着变），一般只在游戏或特殊输入场景用。

你这个场景直接用 key 就行，改法很简单：

handleKeydown(e) {

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

    console.log('Enter pressed')

  }

}

注意是字符串 'Enter'，不是数字，大小写也别写错。

如果还兼容老浏览器（比如 IE），可以先缓存一下兼容性判断：

handleKeydown(e) {

  const isEnter = e.key === 'Enter' || e.keyCode === 13

  if (isEnter) {

    console.log('Enter pressed')

  }

}

不过现在都 2025 年了，除非你要支持 IE11，否则直接用 key 就行，简单又干净。

2026-02-26 14:01