输入框的keydown事件在回车键按下时没反应怎么办？

司马树萱提问于 2026-02-03 16:37:44 阅读 62

交互

我给输入框绑定了keydown事件，想用回车触发提交，但按回车完全没反应。其他键比如字母键能正常触发，控制台也没报错。试过把事件改到父元素上还是不行，这是为什么啊？


<input type="text" @keydown="handleKey" />

对应的JS代码是这样的：


methods: {
  handleKey(e) {
    if (e.key === 'Enter') {
      console.log('回车被按下了')
    }
  }
}

用原生JS测试也是一样，输入框聚焦状态下按回车就是不执行，其他按键都能看到日志…

我来解答赞 6 收藏

反馈

2 条解答

UX正汉 Lv1

问题应该出在浏览器默认行为阻止了事件触发。回车键在输入框里默认会触发表单提交，但如果你没有阻止默认行为，同时又没正确绑定事件，就可能出现“没反应”的情况。

你用的是 Vue 的话，可以在事件处理里加 e.preventDefault() 看看有没有日志输出：

handleKey(e) {

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

    e.preventDefault(); // 阻止默认的表单提交行为

    console.log('回车被按下了');

  }

}

如果加了 preventDefault 后能看到日志，说明问题就是被浏览器默认拦截了。这时候你可以继续在里面调用你的提交逻辑。

另外，也可以试试用 @keyup.enter 这个 Vue 的修饰符，更简洁：

<input type="text" @keyup.enter="submitForm" />

如果是原生 JS，记得加 addEventListener 的时候不要遗漏 preventDefault：

input.addEventListener('keydown', function(e) {

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

    e.preventDefault();

    console.log('回车被按下了');

  }

});

这种情况一般不是事件没绑定成功，而是被浏览器默认行为“吞掉了”。加个 preventDefault 打印个日志就能确认问题。

2026-02-04 20:18

彦森的笔记 Lv1

回车键会被浏览器默认行为拦截，试试在事件处理函数里加 e.preventDefault()，或者用 keyup 代替 keydown。
实在不行换个事件绑定方式，比如用 @keyup.enter 直接绑定到方法上，简单粗暴。

用下面这行代码搞定：

@keyup.enter="handleKey"

2026-02-03 17:04