为什么 keypress 事件在 Vue 里监听不到方向键？

Mr-俊鑫提问于 2026-03-01 01:43:20 阅读 28

交互

我最近在用 Vue 做一个简单的键盘控制功能，想用 keypress 监听方向键（比如左、右箭头），但发现完全没反应。查了文档说 keypress 只对能产生字符的按键有效，那是不是意味着方向键根本不会触发 keypress？但我试过换成 keydown 就可以，只是不太确定该不该换，会不会有兼容性问题？

下面是我写的代码：

<template>
  <input @keypress="handleKeyPress" placeholder="按方向键试试" />
</template>

<script>
export default {
  methods: {
    handleKeyPress(e) {
      console.log('按下了:', e.key);
    }
  }
}
</script>

keypress

我来解答赞 14 收藏

反馈

2 条解答

UE丶玉娅 Lv1

这个问题其实涉及到键盘事件的底层机制，我来详细解释下为什么keypress监听不到方向键，以及解决方案。

具体来说，keypress事件的本质是监听"能产生字符的按键"，而方向键、功能键(F1-F12)、Ctrl/Alt/Shift这些修饰键都不会触发keypress。这是浏览器规范里明确规定的行为，不是Vue的问题。

解决办法很简单，换成keydown或者keyup事件就行。这两个事件能捕获所有按键，包括非字符键。不用担心兼容性，这两个事件从IE9+就完全支持了，现代浏览器更没问题。

你原来的代码改成这样就能正常工作：

<template>

  // 把keypress改成keydown

  <input @keydown="handleKeyDown" placeholder="按方向键试试" />

</template>



<script>

export default {

  methods: {

    handleKeyDown(e) {

      // 现在方向键就能正常捕获了

      console.log('按下了:', e.key); 

      

      // 处理具体按键逻辑

      switch(e.key) {

        case 'ArrowLeft':

          // 左箭头处理

          break;

        case 'ArrowRight':

          // 右箭头处理

          break;

        // 其他按键...

      }

    }

  }

}

</script>

补充个小细节：如果你想阻止默认行为（比如防止方向键滚动页面），记得在方法里加e.preventDefault()。不过要注意别把所有按键都阻止了，否则会影响输入框正常输入。

2026-03-07 18:06

博主尚斌 Lv1

我之前踩过这个坑，你的理解是对的。

keypress 监听不到方向键是正常的浏览器行为，不是 Vue 的问题。keypress 事件的设计初衷是监听能产生字符输入的按键，比如字母、数字、符号这些。方向键、Shift、Ctrl、Esc 这些功能键都不会触发 keypress。

放心换成 keydown 吧，兼容性完全没问题。keydown 是所有按键都能监听到，而且浏览器支持非常广泛，从 IE6 时代就有了，不用担心。

改成这样就行：

顺便说一句，Vue 还支持按键修饰符，写起来更简洁。比如只监听上下方向键可以这样写：@keydown.up 或 @keydown.down，方向键对应的修饰符是 .up、.down、.left、.right。

简单总结一下就是：keypress 已经过时了，MDN 都标注为废弃状态，以后统一用 keydown 就完事了。

2026-03-01 05:00