表单回车提交是浏览器原生行为，前提为表单内有且仅有一个可编辑文本输入框且无干扰按钮；onsubmit必须绑定在form元素上；框架中需确保真实form标签存在且事件透传正确。
表单默认就支持回车提交，但有前提条件
只要表单里有且仅有一个 <input type="text">（或 search、email、number 等可编辑类型），且没有其他按钮干扰，用户在该输入框中按回车，浏览器就会自动触发 submit 事件。这不是需要“手动实现”的功能，而是原生行为。
常见误操作是加了多个文本输入框，或者混入了 <button></button> 或 <input type="button"> 却没设 type="submit"，这时回车会失效——浏览器无法确定该提交给谁。
- 确保表单内最多只有一个可聚焦的文本类输入控件（
type="text"、type="search"等） - 所有按钮必须显式声明
type="submit"，否则可能被浏览器忽略提交意图 - 避免在
<input>上绑定onkeypress或onkeydown并调用event.preventDefault()，这会直接阻断默认回车行为
为什么加了 onsubmit 还不触发？检查表单结构
回车提交本质是触发表单的 submit 事件，所以 onsubmit 处理函数必须绑定在 <form></form> 元素上，而不是某个 <input>。如果只给输入框写 onkeypress="if(event.key==='Enter') submit()"，不仅冗余，还容易因未调用 event.preventDefault() 导致页面跳转或重复提交。
-
<form onsubmit="handleSubmit(event)"></form>✅ 正确位置 -
<input onkeypress="...">❌ 不必要，且易出错 - 若用了 JavaScript 动态创建表单，需确认
<form></form>标签完整闭合，且未被 JS 移除或替换
React/Vue 中回车不提交？多半是事件冒泡或表单缺失
框架环境下，回车失效往往不是浏览器问题，而是组件封装导致表单语义丢失。比如把 <input> 单独抽成子组件，却没把 onSubmit 透传到最外层 <form></form>；或者用了 div 模拟表单，完全绕过了原生 form 行为。
- React：确保真实存在
<form onsubmit="{handleSubmit}"></form>，不要用div+onClick模拟 - Vue：使用
@submit.prevent时，.prevent会阻止默认行为——但这是为了防止页面刷新，不是禁用回车；只要结构正确，回车仍会触发该事件 - 检查 DevTools 中元素是否真被渲染为
<form></form>，而非被框架 wrapper 包裹后脱离语义
移动端软键盘回车键显示为“搜索”或“前往”？不影响提交
iOS 和 Android 的软键盘会根据 input 的 type 和 enterkeyhint 属性调整回车键文案，比如 type="search" 显示“搜索”，enterkeyhint="send" 显示“发送”。但只要焦点在可提交的输入框内，点击该按键仍会触发表单提交——和桌面端回车行为一致。
- 无需为兼容性额外监听
enterkeyhint，它只是 UI 提示，不改变事件逻辑 - 若想统一软键盘提示，可用
enterkeyhint="go"或"search"，但前提是type支持（如type="search"支持search，type="url"支持go） - 真正影响提交的是表单结构和焦点状态，不是按键文案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
