回车触发表单提交取决于聚焦元素是否属于含有效type="submit"按钮的表单；textarea默认不提交；submit事件须绑定form且preventdefault()需首行调用；formdata需后端匹配解析中间件。
回车键触发表单提交不是“自动发生”的魔法，而是浏览器严格遵循 HTML 规范执行的一套判定流程；不理解这个流程，就容易在多输入框、动态按钮、textarea 或自定义控件场景下出现意外提交或完全不响应。
浏览器怎么决定回车是否触发提交
关键不在“有没有回车”，而在“当前聚焦元素是否属于可提交表单，且该表单存在有效的 type="submit" 按钮”。
- 聚焦在
<input type="text">、<input type="email">、<select></select>等可编辑控件时，按回车会尝试提交其最近的祖先<form></form> - 聚焦在
<textarea></textarea>时，**默认不触发提交**（允许换行），除非显式设置onkeydown拦截并判断event.key === "Enter"且!event.shiftKey - 若表单内没有
type="submit"按钮（比如只有<button></button>无type属性），部分浏览器（如旧版 Safari）可能拒绝回车提交 - 多个
<form></form>嵌套时，回车只作用于**当前聚焦元素所在最近的<form></form>**，不会向上冒泡查找
submit 事件和 event.preventDefault() 的生效时机
很多人以为加了 addEventListener("submit", ...) 就万事大吉，但实际中常因时机或位置错误导致拦截失败。
-
submit事件只能绑定在<form></form>元素上，绑定到<input type="submit">或<button type="submit"></button>上无效 -
event.preventDefault()必须写在事件处理函数**第一行**，否则浏览器可能已开始序列化数据或跳转 - 如果用了
fetch()提交，但没调preventDefault()，页面仍会跳转——这不是 fetch 失败，是浏览器在你发请求的同时也执行了原生提交 - 动态插入的表单（如通过 JS 创建）需在插入 DOM 后立即绑定 submit 事件，不能依赖 document ready 时的静态选择器
FormData 构造与后端接收不匹配的典型原因
前端用 new FormData(form) 看似万能，但后端收不到字段，90% 是因为 Content-Type 和解析中间件没对齐。
-
FormData自动设置Content-Type: multipart/form-data; boundary=...，但 Express 默认不解析它——必须加multer或busboy，express.urlencoded()完全无效 - 如果表单含文件，
enctype="multipart/form-data"属性**必须显式写在<form></form>标签上**，仅靠 JS 构造FormData不会自动补全该属性 - 想发 JSON？别直接传
FormData，要先转：JSON.stringify(Object.fromEntries(new FormData(form)))，并手动设headers: {"Content-Type": "application/json"} - 后端收到空
req.body，先检查是否漏了express.urlencoded({ extended: true })（对应application/x-www-form-urlencoded）
最容易被忽略的是：回车提交行为由浏览器控制，而 submit 事件只是它的出口；一旦你用 JS 拦截并改走 fetch，就必须自己承担字段收集、错误反馈、加载状态、重复提交防护等全部责任——浏览器原生的那些便利，不会自动迁移过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
