如何防止 JavaScript 动态表格中回车键误触发删除行操作

当页面中使用动态生成的删除按钮时，若未显式指定 `type=”button”`，浏览器会将其默认视为 `submit` 类型，导致在输入框内按 enter 键时意外触发表单提交或冒泡至父表单，进而引发误删除行为。解决方案是为删除按钮显式设置 `type=”button”`。

在 Web 表单开发中，尤其是涉及动态增删行（如多字段表单、问卷配置、参数列表等）的场景，一个常见但容易被忽视的问题是：点击删除按钮正常工作，但在任意输入框中按 Enter 键也会触发删除。根本原因在于 html 规范中 元素的默认 type 值为 “submit” —— 即使该按钮并未包裹在

内，或其父级无表单上下文，只要它位于可提交上下文中（例如嵌套在

中，或浏览器兼容性行为影响），Enter 键仍可能触发其点击事件。

✅ 正确做法：显式声明 button 类型

将动态生成的删除按钮写法从：

−

改为：

−

⚠️ 注意：此修改必须应用在所有动态插入的按钮节点中。如果你使用 javaScript（如 innerHTML 或 createElement）生成按钮，请确保 type=”button” 被一并写入：

立即学习“Java免费学习笔记（深入）”；

// ✅ 推荐：创建时即指定 type const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'remove_node_btn_frm_field'; btn.textContent = '−';  // 或使用 innerHTML（需确保 type 存在） row.innerHTML = `   
          −   
 `;

? 补充验证：避免事件冒泡干扰（可选增强）

虽然设置 type=”button” 已解决 99% 的 Enter 误触发问题，但为保险起见，也可在事件处理中增加键盘事件拦截（仅在必要时）：

// 阻止输入框内 Enter 提交（如父容器是 form） $("body").on("keypress", ".form_field_outer_row input", function(e) {   if (e.key === "Enter") {     e.preventDefault(); // 阻止默认提交行为   } });

但请注意：这不是替代方案，而是辅助手段。核心修复始终是 type=”button” —— 它符合语义化 HTML 原则，无需额外 js 逻辑，兼容性好，且彻底切断 Enter 与按钮行为的隐式关联。

✅ 总结

遵循这一规范，即可安全支持任意数量的动态表单项，同时保障输入体验与操作可靠性。