当表单内输入框获得焦点时按 enter 键，浏览器默认会提交表单或激活第一个可提交按钮（如 type="submit"），即使该按钮并非预期目标；解决方法是显式为非提交用途的按钮设置 type="button"。

当表单内输入框获得焦点时按 enter 键，浏览器默认会提交表单或激活第一个可提交按钮（如 type="submit"），即使该按钮并非预期目标；解决方法是显式为非提交用途的按钮设置 type="button"。

在 HTML 表单中，按下 Enter 键的行为由浏览器自动管理：如果表单中存在 元素且未显式声明 type 属性，其默认类型为 submit（根据 HTML 规范）。这意味着，即使你移除了 type="submit"，只要写成 Cancel，它依然等价于 Cancel —— 因此当输入框聚焦时按 Enter，浏览器会“模拟点击”该默认 submit 按钮，导致意外提交或触发点击事件。

✅ 正确做法是：为所有非提交功能的按钮（如“取消”“重置”“弹窗打开”等）显式指定 type="button"：

Cancel Submit

⚠️ 注意事项：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 仅靠 event.preventDefault() 或监听 keydown 拦截 Enter 并不可靠，属于治标不治本，且易遗漏边界情况；
• 同样需注意：若未设 type，默认为 text，但 的默认行为更危险；
• 若使用 JavaScript 动态创建按钮，务必同步设置 button.type = 'button'；
• 在 React/Vue 等框架中，也需确保 JSX/模板中显式写出 type="button"，避免依赖默认行为。

总结：不要依赖隐式类型，始终为功能性按钮（非提交）显式声明 type="button" —— 这是最轻量、最标准、最兼容的解决方案。

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