Vue+Vuetify表单含隐藏字段时回车提交失效问题排查

问题根因 #

这是浏览器原生HTML表单的隐式提交规则导致的：

• 当表单内仅存在1个可交互输入控件时，即使表单内没有显式的<input type="submit">按钮，聚焦在输入框时按回车键也会自动触发表单提交，你第一个仅输入邮箱的表单刚好符合这个规则。
• 当表单内存在2个及以上可交互输入控件时，浏览器要求表单内必须存在一个显式的提交按钮，才会触发回车隐式提交。你第二个表单里的隐藏邮箱输入框虽然视觉不可见，但它仍然属于表单的有效输入控件，浏览器会判定该表单有2个输入字段，缺少提交按钮的情况下就不会触发submit事件。
• 你注释掉隐藏邮箱字段后，第二个表单回到单输入控件的状态，自然就恢复了回车提交的能力。

修复方案 #

任选一种即可，同时不会影响密码管理器识别邮箱：

1. 给第二个表单内部添加一个隐藏的提交按钮，让浏览器判定满足隐式提交条件：

<v-form ref="form2" v-if="showForm === 2" @submit.prevent="login">
  <!-- 原有隐藏邮箱字段 -->
  <input style="display:none" name="email" type="email" v-model="email" readonly autocomplete="username" />
  <!-- 新增隐藏的提交按钮 -->
  <input type="submit" hidden />
  <!-- 原有其他内容 -->
  ...
</v-form>

2. 给密码输入框手动绑定回车事件，主动触发提交逻辑：

<v-text-field
  label="Password"
  v-model="password"
  ...
  @keydown.enter.prevent="login"
/>

3. 把外部的提交按钮放到v-form内部，设置type="submit"属性，Vuetify的v-btn支持动态属性绑定，可以适配两个表单的状态。

内容的提问来源于stack exchange，提问作者Moshe Katz