标题：如何在表单末尾按回车键自动添加一行新输入行并聚焦首个字段_技术教程

本文详解如何通过现代 dom 事件监听实现“在最后一列输入框按 enter 键时，动态克隆一行新表单行，并自动聚焦到新行第一个输入框”，避免重复创建、逻辑错位与焦点混乱问题。

要实现“在表单最后一栏输入后按 Enter 自动新增一行相同结构的输入行，并将光标定位到新行首字段”，关键在于分离「焦点切换」与「行新增」逻辑，并使用事件委托 + 精确目标判断，而非为每个 input 单独绑定 onkeypress——后者极易引发重复绑定、多次触发、DOM 查找错乱等问题（如原代码中 display.insertAdjacentHTML 在循环内执行，导致每按一次回车就创建多行）。

以下是推荐的现代化、健壮且可维护的实现方案：

✅ 正确思路

使用 事件委托：监听（或）的 keypress 事件，统一处理所有的回车行为；
区分两种行为：
- 若当前是最后一列（通过 class="last" 标识），则克隆整行 → 清空新行输入值 → 追加到表格 → 聚焦新行第一个 ；
- 否则，顺序跳转到同一行的下一列 （利用 DOM 邻居关系，更可靠）；
避免内联 JS（如 onkeypress="..."）和全局 document.forms[0] 弱耦合写法，提升可读性与可测试性。
✅ 推荐代码实现
```
  
    
```
1 2 3 4 5
```
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();
    }
  }
});
```
⚠️ 注意事项与最佳实践
- 禁用浏览器默认回车提交：确保
  不含 action 或添加 e.preventDefault()（若需拦截提交）；本例中因无 submit 按钮，默认不会提交，但仍建议显式防御。
- 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 开发规范。