当前位置：首页 > 文章列表 > 文章 > php教程 > 按回车添加新行并自动聚焦方法

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

2026-02-05 08:57:42 0浏览收藏

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

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

本文详解如何通过现代 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(); // 关键：阻止表单默认提交或页面跳动
});