Vue里怎么让回车键触发表单提交？

打工人一涵提问于 2026-02-27 20:47:22 阅读 17

交互

我在写一个登录页，想让用户在输入框里按回车就能提交，但试了几次都不行。绑了@keyup.enter事件，但有时候没反应，有时候又会刷新页面。是不是哪里写错了？

这是我的代码：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" type="text" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" @keyup.enter="handleSubmit" />
    <button type="submit">登录</button>
  </form>
</template>

按回车时 handleSubmit 确实会被调用，但偶尔还是会触发默认的表单提交导致页面刷新，这到底是为啥？

我来解答赞 4 收藏

反馈

2 条解答

爱学习的敏涵 Lv1

表单里别用@keyup.enter，直接在form上加@submit.prevent就行，把button的type改成button：

<form @submit.prevent="handleSubmit">

  <input v-model="username" type="text" placeholder="用户名" />

  <input v-model="password" type="password" placeholder="密码" />

  <button type="button" @click="handleSubmit">登录</button>

</form>

回车会自动触发form的submit事件，这样写不会刷新。

2026-03-06 09:05

轩辕秀丽 Lv1

这个问题我之前也踩过坑，其实是 HTML 表单的标准行为在作怪。

按照 HTML 规范，当一个 form 内只有一个 type="text" 的输入框时，按回车会自动触发 form 的 submit 事件。你代码里其实已经写了 @submit.prevent，理论上应该能阻止默认刷新行为，但有时候事件触发顺序或者事件冒泡会出一些诡异的问题。

标准写法是这样的：

<template>

  <form @submit.prevent="handleSubmit">

    <input v-model="username" type="text" placeholder="用户名" />

    <input v-model="password" type="password" placeholder="密码" />

    <button type="submit">登录</button>

  </form>

</template>

对，把 input 上的 @keyup.enter 去掉就行。

原因很简单：回车键在表单内会自然触发 form 的 submit 事件，你已经在 form 上阻止了默认行为，所以直接让事件走标准流程就好。额外在 input 上绑 @keyup.enter 反而可能导致事件处理时序混乱，或者某些边缘情况下没拦住默认行为。

如果你的 handleSubmit 是异步的，记得改成 async：

const handleSubmit = async () => {

  // 你的提交逻辑

}

还有个细节，按钮一定要写 type="submit"，有些浏览器默认 type 是 button，那样回车提交可能不生效。这个在 MDN 的 form 文档里有明确说明，是很多人容易忽略的点。

总结一下：表单提交就用标准的 form submit 事件去处理，别搞什么花里胡哨的键盘事件监听，既符合规范又省事。

2026-02-28 22:07