本文详解如何通过现代 dom 事件监听实现“在最后一列输入框按 enter 键时，动态克隆一行新表单行，并自动聚焦到新行第一个输入框”，避免重复创建、逻辑错位与焦点混乱问题。
要实现“在表单最后一栏输入后按 Enter 自动新增一行相同结构的输入行，并将光标定位到新行首字段”，关键在于分离「焦点切换」与「行新增」逻辑，并使用事件委托 + 精确目标判断，而非为每个 input 单独绑定 onkeypress——后者极易引发重复绑定、多次触发、DOM 查找错乱等问题（如原代码中 display.insertAdjacentHTML 在循环内执行，导致每按一次回车就创建多行）。
以下是推荐的现代化、健壮且可维护的实现方案：
✅ 正确思路
- 使用 事件委托：监听
（或 ）的 keypress 事件，统一处理所有 的回车行为；
- 区分两种行为：
- 若当前 是最后一列（通过 class=”last” 标识），则克隆整行 → 清空新行输入值 → 追加到表格 → 聚焦新行第一个 ；
- 否则，顺序跳转到同一行的下一列 （利用 DOM 邻居关系，更可靠）；
- 避免内联 JS（如 onkeypress=”…”）和全局 document.forms[0] 弱耦合写法，提升可读性与可测试性。
✅ 推荐代码实现
const display = document.getElementById("area"); const tbody = document.getElementById("t1"); tbody.addEventListener("keypress", function (e) { if (e.key !== "Enter") return; // 更语义化：优先用 e.key 而非 e.code（兼容性更好） const targetInput = e.target; if (!(targetInput instanceof HTMLInputElement)) return; if (targetInput.classList.contains("last")) { // ✅ 克隆当前行（含结构与事件委托能力） const newRow = tbody.querySelector("tr").cloneNode(true); // ✅ 清空新行所有输入框值 newRow.querySelectorAll("input").forEach(inp => inp.value = ""); // ✅ 追加新行 tbody.appendChild(newRow); // ✅ 聚焦新行第一个输入框 newRow.querySelector("input").focus(); } else { // ✅ 同行内顺序跳转：定位到当前 td 的下一个 td 中的 input const currentTd = targetInput.closest("td"); const nextTd = currentTd.nextElementSibling; if (nextTd) { const nextInput = nextTd.querySelector("input"); if (nextInput) nextInput.focus(); } } });⚠️ 注意事项与最佳实践
- 禁用浏览器默认回车提交：确保
- autocomplete=”off” 建议添加：防止浏览器自动填充干扰焦点逻辑。
- 避免 document.forms[0] 强依赖：使用 tbody 和 tr 的层级关系更稳定，支持页面存在多个表单。
- 不推荐 window.event 写法：已过时，现代标准应始终使用事件回调参数 e。
-
扩展性提示：如需支持删除行、校验、数据收集，可在
上添加 data-row-id，配合 Array.from(tbody.rows) 统一管理。 该方案彻底解决了原始问题中的三大缺陷：
? 不再重复创建（仅在 .last 输入框触发一次）；
? 新增行永远是 1 行（cloneNode(true) + appendChild 一次）；
? 焦点精准落于新行首字段（newRow.querySelector(“input”).focus()），且同行跳转逻辑清晰可靠。只需复制上述 HTML 与 JS，即可开箱即用——简洁、高效、符合现代 Web 开发规范。
- 区分两种行为：