本文详解如何通过现代 dom 事件监听实现“在表格最后一列输入框按下 enter 键时，仅新增一行结构相同的表单行，并将焦点自动移至新行首个输入框”，避免重复创建、焦点错位及旧式 `onkeypress` 嵌套调用导致的逻辑混乱。
传统方案（如原代码中为每个 绑定 onkeypress=”return tabE(this,event)”）存在严重缺陷：
- 事件处理逻辑耦合在 HTML 中，难以维护；
- 每次按键都遍历全部表单元素，且在非末尾字段也执行了 insertAdjacentHTML，导致表单成倍增长；
- 动态插入后未重置输入值，焦点目标混乱，ele[q].focus() 在新 DOM 上失效。
✅ 正确解法应遵循 事件委托 + 精准条件判断 + 单次克隆 原则。以下是优化后的完整实现：
✅ 推荐方案：基于事件委托的优雅实现
const display = document.getElementById("area");
const tbody = document.getElementById("t1");
// 使用事件委托：监听 tbody，捕获所有 input 的 keypress
tbody.addEventListener("keypress", function (e) {
// 仅响应 Enter 键（兼容性优于 keyCode）
if (e.code !== "Enter") return;
const target = e.target;
// 确保触发源是 input，且带有 .last 类（标识最后一列）
if (!target.matches("input.last")) {
// 非最后一列：跳转到同一行的下一列 input
const currentTd = target.closest("td");
const nextTd = currentTd.nextElementSibling;
if (nextTd) {
const nextInput = nextTd.querySelector("input");
if (nextInput) nextInput.focus();
}
e.preventDefault(); // 阻止默认换行或提交行为
return;
}
// ✅ 是最后一列 → 克隆当前行，清空值，追加到 tbody，并聚焦首输入框
const newRow = tbody.querySelector("tr").cloneNode(true);
newRow.querySelectorAll("input").forEach(inp => inp.value = ""); // 清空所有输入值
tbody.appendChild(newRow);
// 聚焦新行第一个 input（确保可编辑）
const firstInput = newRow.querySelector("input");
if (firstInput) firstInput.focus();
e.preventDefault(); // 关键：阻止表单默认提交或页面跳动
});
? 关键改进点说明：
- 精准触发：仅当 Enter 按在带 class=”last” 的 上才新增行，杜绝误触发；
- 单次克隆：使用 cloneNode(true) 复制当前第一行模板，而非每次都在循环中重复插入，彻底解决“生成多份”的问题；
- 自动清空：新行所有 值被重置为空字符串，避免脏数据残留；
- 智能焦点：新行创建后立即 focus() 到首个输入框，符合用户预期；
- 事件委托：无需为每个 单独绑定事件，性能更优，动态新增的行也天然支持；
-
语义化结构：使用
/
提升可访问性与语义正确性。
⚠️ 注意事项：
- 不要再给 添加全局 onkeydown 干预（如 keyCode=9），这会破坏原生表单行为（如文本域换行、按钮提交等）；
- 若需支持更多列或动态列数，可将 .last 类逻辑改为 td:last-child input 选择器，但需确保结构稳定；
- 如需持久化数据或校验，应在新增前增加业务逻辑钩子（例如 if (validateRow(currentRow)) { … }）。
此方案简洁、健壮、可扩展，是构建动态表单行录入场景的最佳实践。