如何在表单末尾按回车键自动添加一行新输入行并聚焦首个字段

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

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

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

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

下载

✅ 正确思路

• 使用 事件委托：监听 （或 ）的 keypress 事件，统一处理所有 的回车行为；
  区分两种行为：

  • 若当前 是最后一列（通过 class="last" 标识），则克隆整行 → 清空新行输入值 → 追加到表格 → 聚焦新行第一个 ；
  • 否则，顺序跳转到同一行的下一列 （利用 DOM 邻居关系，更可靠）；
  避免内联 JS（如 onkeypress="..."）和全局 document.forms[0] 弱耦合写法，提升可读性与可测试性。

  ✅ 推荐代码实现

  <div class="area" id="area">
    <form method="" action="">
      <table>
        <thead>
          <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
          </tr>
        </thead>
        <tbody id="t1">
          <tr>
            <td><input type="text" autocomplete="off"></td>
            <td><input type="text" autocomplete="off"></td>
            <td><input type="text" autocomplete="off"></td>
            <td><input type="text" autocomplete="off"></td>
            <td><input type="text" class="last" autocomplete="off"></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>

  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 开发规范。