标题：如何在表单最后一个输入框按回车时动态添加一行新表单并自动聚焦

本文详解如何通过现代 dom 事件监听实现“在表格最后一列输入框按下 enter 键时，仅新增一行结构相同的表单行，并将焦点自动移至新行首个输入框”，避免重复创建、焦点错位及旧式 `onkeypress` 嵌套调用导致的逻辑混乱。

传统方案（如原代码中为每个 绑定 onkeypress="return tabE(this,event)"）存在严重缺陷：

• 事件处理逻辑耦合在 HTML 中，难以维护；
• 每次按键都遍历全部表单元素，且在非末尾字段也执行了 insertAdjacentHTML，导致表单成倍增长；
• 动态插入后未重置输入值，焦点目标混乱，ele[q].focus() 在新 DOM 上失效。

✅ 正确解法应遵循 事件委托 + 精准条件判断 + 单次克隆 原则。以下是优化后的完整实现：

✅ 推荐方案：基于事件委托的优雅实现

  

    

      

        

          
1
          
2
          
3
          
4
          
5
        
      
      

        

          

          

          

          

          

        
      
    
  

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("inp
ut.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)) { ... }）。

  此方案简洁、健壮、可扩展，是构建动态表单行录入场景的最佳实践。