会提交；未写type属性的button默认为type="submit"，聚焦任意表单控件按回车即触发提交，属html规范强制行为。

表单内没写type的button按回车会提交吗

会。只要在

里且没写type属性，浏览器就当它是type="submit"——不仅点它会提交，**聚焦在任意<input>上按回车也会触发它**。这不是兼容性问题，是 HTML 规范强制行为。

常见现象：用户填完一个字段直接按回车，页面刷新或空 POST 发出去，后端收不到数据，前端状态丢失。尤其在动态增删行的表单里，回车可能误删整行，因为事件委托监听到的是“表单提交”，而非“删除按钮点击”。

为什么加type="button"就能防住回车

type="button"从语义层切断按钮和表单的绑定关系：它不参与表单的 submit 生命周期，不响应 Enter 键，也不收集字段。浏览器根本不会把它当作可提交目标。

• type="submit"：Enter 键自动触发，且按 DOM 顺序找第一个（哪怕它藏在 div 里）
• type="button"：Enter 键完全无视，只响应 click
• 不写type：等价于type="submit"，回车照常触发
• type="reset"：回车也会触发重置（但只还原 HTML 初始值，不是 JS 设置的值）

容易被忽略的坑：type值写错或不带引号

非法type值在

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

内会被降级为submit，比如：

• type=button（缺引号）：部分浏览器容忍，但 HTML5 要求必须带引号，否则解析失败
• type="primary"、type="click"、type=""（空字符串）：全部降级为submit，回车依然触发
• React/Vue 组件返回的按钮若没显式传type，JSX/模板渲染后就是无type的原生<button></button>，照样翻车

检查方法：用开发者工具选中按钮，看 Elements 面板里type属性是否真实存在且值为"button"——DOM 不会自动补全，得靠你写。

要不要在 JS 里加event.preventDefault()

不用。给type="button"的按钮加event.preventDefault()是冗余操作，因为它压根没有默认提交行为可防。真正该加preventDefault()的场景只有一个：type="submit"按钮需要 JS 校验后条件性拦截提交。

但更推荐的做法是：校验逻辑用type="button"触发，通过 JS 手动调用form.submit()或发 AJAX；把提交动作从语义上和按钮解耦，避免在 submit 事件里做复杂判断。

复杂点在于：回车提交的目标不一定是视觉上最靠近的按钮，而是 DOM 中第一个type="submit"（或无type）的<button></button>。所以哪怕你只在表单底部放了一个提交按钮，上面几十个type="button"的删除按钮，回车仍不会误触它们——前提是它们真写了type="button"。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！