当页面中使用动态生成的删除按钮时，若未显式指定 `type="button"`，浏览器会将其默认视为 `submit` 类型，导致在输入框内按 enter 键时意外触发表单提交或冒泡至父表单，进而引发误删除行为。解决方案是为删除按钮显式设置 `type="button"`。
在 Web 表单开发中，尤其是涉及动态增删行（如多字段表单、问卷配置、参数列表等）的场景，一个常见但容易被忽视的问题是：点击删除按钮正常工作，但在任意输入框中按 Enter 键也会触发删除。根本原因在于 HTML 规范中
✅ 正确做法：显式声明 button 类型
将动态生成的删除按钮写法从：
<button class="remove_node_btn_frm_field">−</button>
改为：
<button type="button" class="remove_node_btn_frm_field">−</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 = `
<div class="form_field_outer_row">
<input type="text" name="field[]">
<button type="button" class="remove_node_btn_frm_field">−</button>
</div>
`;? 补充验证：避免事件冒泡干扰（可选增强）
虽然设置 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 与按钮行为的隐式关联。
✅ 总结
| 问题现象 | 回车键误删行 |
|---|---|
| 根本原因 | |
| 关键修复 | 所有删除按钮必须显式添加 type="button" |
| 最佳实践 | 动态生成按钮时，通过 element.type = 'button' 或模板字符串强制声明 |
遵循这一规范，即可安全支持任意数量的动态表单项，同时保障输入体验与操作可靠性。
