按回车添加新行并自动聚焦方法

大家好，我们又见面了啊~本文《表单最后按回车添加新行并自动聚焦方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

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

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

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

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

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

<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>&lt;input type=&quot;text&quot; placeholder=&quot;第1列&quot;&gt;</td>
          <td>&lt;input type=&quot;text&quot; placeholder=&quot;第2列&quot;&gt;</td>
          <td>&lt;input type=&quot;text&quot; placeholder=&quot;第3列&quot;&gt;</td>
          <td>&lt;input type=&quot;text&quot; placeholder=&quot;第4列&quot;&gt;</td>
          <td>&lt;input type=&quot;text&quot; class=&quot;last&quot; placeholder=&quot;← 按 Enter 新增一行&quot;&gt;</td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

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" 的 <input> 上才新增行，杜绝误触发；
• 单次克隆：使用 cloneNode(true) 复制当前第一行模板，而非每次都在循环中重复插入，彻底解决“生成多份”的问题；
• 自动清空：新行所有 <input> 值被重置为空字符串，避免脏数据残留；
• 智能焦点：新行创建后立即 focus() 到首个输入框，符合用户预期；
• 事件委托：无需为每个 <input> 单独绑定事件，性能更优，动态新增的行也天然支持；
• 语义化结构：使用 / 提升可访问性与语义正确性。

⚠️ 注意事项：

• 不要再给 添加全局 onkeydown 干预（如 keyCode=9），这会破坏原生表单行为（如文本域换行、按钮提交等）；
• 若需支持更多列或动态列数，可将 .last 类逻辑改为 td:last-child input 选择器，但需确保结构稳定；
• 如需持久化数据或校验，应在新增前增加业务逻辑钩子（例如 if (validateRow(currentRow)) { ... }）。

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

以上就是《按回车添加新行并自动聚焦方法》的详细内容，更多关于的资料请关注golang学习网公众号！