17370845950

当动态生成的表单中包含删除按钮时，若按钮未显式设置 `type="button"`，其默认类型为 `submit`，会导致在输入框内按 enter 键时意外触发表单提交或冒泡至父表单，进而激活删除逻辑。本文提供简洁可靠的解决方案。

问题根源在于：HTML 中 元素在未指定 type 属性时，默认行为为 type="submit"。即使该按钮不在

标签内，若其位于表单上下文（或浏览器兼容性处理）中，按下 Enter 键仍可能被解释为“提交”，从而触发事件冒泡，最终命中你绑定在 body 上的 .remove_node_btn_frm_field 点击监听器——尤其当焦点在同级输入框中、且 Enter 键被全局捕获或表单隐式提交时，极易引发误删。

✅ 正确做法是显式声明按钮类型为 button，彻底消除其提交语义：

删除

⚠️ 注意事项：

• 不要依赖 event.preventDefault() 或监听 keydown 拦截 Enter（治标不治本，增加复杂度且易遗漏）；
• 避免将删除按钮嵌套在
  内却不设 type —— 即使无 action，浏览器仍可能执行默认提交行为；
• 若页面存在外层
  ，且删除按钮意外成为其可提交控件，还应检查是否需添加 form="some-form-id" 或移出表单结构；
• 动态生成按钮时（如通过 JS 拼接字符串或 document.createElement），务必同步设置 type="button"：

// ✅ 动态创建示例
const btn = document.createElement('button');
btn.type = 'button'; // 关键！
btn.className = 'remove_node_btn_frm_field';
btn.textContent = '删除';
row.appendChild(btn);

总结： 的默认 submit 行为是 Enter 键误删的元凶，而 type="button" 是最轻量、最可靠、符合语义的修复方案。 无需修改现有 JavaScript 事件绑定逻辑，仅需修正 HTML 按钮声明，即可一劳永逸避免输入过程中误删整行。