当表单内输入框获得焦点时按 Enter 键，浏览器默认会触发表单内第一个 （或 ）的点击事件；这是 HTML 表单的原生提交机制所致，可通过显式设置 type="button" 避免非预期触发。

当表单内输入框获得焦点时按 enter 键，浏览器默认会触发表单内第一个 ``（或 ``）的点击事件；这是 html 表单的原生提交机制所致，可通过显式设置 `type="button"` 避免非预期触发。

在 HTML 表单中，未显式声明 type 属性的 元素，默认行为为 type="submit"。这意味着：只要该按钮位于

标签内，且表单中存在可编辑的表单控件（如 、）并处于焦点状态，用户按下 Enter 键时，浏览器就会自动触发<strong>第一个 type="submit" 按钮的点击事件</strong>（即使它语义上是“取消”按钮），进而可能意外提交表单或执行错误逻辑。<p>例如，以下代码就会出现该问题：</p> <pre class="brush:php;toolbar:false;"></pre> <form> <input type="text" placeholder="Enter something"><button onclick="alert('Cancel clicked!')">Cancel</button> <button type="submit">Submit</button> </form> <p>尽管 Cancel 按钮没有 type="submit"，但因未显式声明 type，其默认值即为 "submit"，因此成为表单内第一个可提交按钮 —— Enter 键会优先触发它。</p> <p>✅ 正确做法是：<strong>对所有非提交用途的按钮，务必显式指定 type="button"</strong>：</p> <div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'"></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="overflowclass">DeepBI DHTML 页面生成器</a> <p class="overflowclass">生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"></pre> <form> <input type="text" placeholder="Enter something"><button type="button" onclick="alert('Cancel clicked!')">Cancel</button> <button type="submit">Submit</button> </form> <blockquote> <p>⚠️ 注意事项： </p> <ul> <li>仅移除 type="submit" 不够（如写成 <button> 而不加 type），因为默认值仍是 "submit"； </button> </li> <li> <input type="button"> 同样安全，但 <button type="button"> 语义更清晰、内容更灵活（支持 HTML 内容）； </button> </li> <li>若需完全禁用 Enter 提交，还可监听表单 submit 事件并调用 event.preventDefault()，但<strong>根本解法仍是正确设置按钮类型</strong>，符合 HTML 规范且无需 JavaScript 干预。</li> </ul> </blockquote> <p>总结：浏览器的 Enter 键提交行为由表单内第一个 type="submit" 元素驱动，而非 DOM 顺序或视觉位置。养成对所有功能性按钮（如“取消”“重置”“展开”等）显式标注 type="button" 的开发习惯，是避免此类隐式交互 bug 的关键实践。</p>

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