当表单内输入框获得焦点时按 Enter 键，浏览器默认会提交表单或触发第一个 （无 type 属性时默认为 submit），导致非预期的点击行为；解决方法是显式为非提交用途的按钮设置 type="button"。

当表单内输入框获得焦点时按 enter 键，浏览器默认会提交表单或触发第一个 ``（无 `type` 属性时默认为 `submit`），导致非预期的点击行为；解决方法是显式为非提交用途的按钮设置 `type="button"`。

在 HTML 表单中，按下 Enter 键的行为受浏览器默认机制严格约束：只要表单内存在至少一个可提交的按钮（即 type="submit" 或缺失 type 属性的 ），且当前焦点位于可编辑控件（如 、）上，回车键就会触发表单提交，或等效地“点击”第一个 submit 类型按钮。

即使你移除了某个按钮的 type="submit"，若未显式声明 type，该 仍会继承默认值 submit —— 这正是问题持续复现的根本原因：

<!-- ❌ 危险写法：type 缺失 → 默认为 submit -->
<button>Cancel</button>
<button type="submit">Save</button>

此时，即使光标在 上，按 Enter 也会触发第一个 （即 Cancel 按钮）的点击事件（因其是第一个 submit 类型按钮），造成逻辑混乱。

✅ 正确做法是：为所有非提交用途的按钮（如“取消”“重置”“帮助”等）显式指定 type="button"：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

立即学习“前端免费学习笔记（深入）”；

<form>
  <input type="text" placeholder="Enter name" />
  <input type="email" placeholder="Enter email" />

  <!-- ✅ 显式声明 type，消除歧义 -->
  <button type="button" onclick="handleCancel()">Cancel</button>
  <button type="submit">Save</button>
</form>

⚠️ 注意事项：

• 同样默认不会触发表单提交，但语义不如 清晰，且缺乏子元素支持（如图标、文本组合）；
• 若需完全禁用回车提交，还可监听表单 submit 事件并调用 event.preventDefault()，但这是兜底方案，不应替代语义化 HTML 修复；
• 在 React/Vue 等框架中，也需确保动态生成的按钮正确绑定 type 属性，避免服务端渲染与客户端 hydration 不一致。

总结：HTML 表单的回车行为由按钮的 type 属性驱动，而非其位置或 onclick 绑定。坚持为每个 显式声明 type（submit / button / reset），是构建健壮、可维护表单交互的基础实践。