本文详解如何通过现代 DOM 事件监听实现“在最后一列输入框按 Enter 键时，动态克隆一行新表单行，并自动聚焦到新行第一个输入框”，避免重复创建、逻辑错位与焦点混乱问题。
要实现“在表单最后一栏输入后按 Enter 自动新增一行相同结构的输入行，并将光标定位到新行首字段”，关键在于分离「焦点切换」与「行新增」逻辑，并使用事件委托 + 精确目标判断，而非为每个 input 单独绑定 onkeypress——后者极易引发重复绑定、多次触发、DOM 查找错乱等问题（如原代码中 display.insertAdjacentHTML 在循环内执行，导致每按一次回车就创建多行）。
以下是推荐的现代化、健壮且可维护的实现方案：
✅ 正确思路
- 使用 事件委托：监听 <table>（或 <tbody>）的 keypress 事件，统一处理所有 <input> 的回车行为；
- 区分两种行为：
- 若当前 <input> 是最后一列（通过 class="last" 标识），则克隆整行 → 清空新行输入值 → 追加到表格 → 聚焦新行第一个 <input>；
- 否则，顺序跳转到同一行的下一列 <input>（利用 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();
}
}
});⚠️ 注意事项与最佳实践
- 禁用浏览器默认回车提交：确保 <form> 不含 action 或添加 e.preventDefault()（若需拦截提交）；本例中因无 submit 按钮，默认不会提交，但仍建议显式防御。
- autocomplete="off" 建议添加：防止浏览器自动填充干扰焦点逻辑。
- 避免 document.forms[0] 强依赖：使用 tbody 和 tr 的层级关系更稳定，支持页面存在多个表单。
- 不推荐 window.event 写法：已过时，现代标准应始终使用事件回调参数 e。
- 扩展性提示：如需支持删除行、校验、数据收集，可在 <tr> 上添加 data-row-id，配合 Array.from(tbody.rows) 统一管理。
该方案彻底解决了原始问题中的三大缺陷：
? 不再重复创建（仅在 .last 输入框触发一次）；
? 新增行永远是 1 行（cloneNode(true) + appendChild 一次）；
? 焦点精准落于新行首字段（newRow.querySelector("input").focus()），且同行跳转逻辑清晰可靠。
只需复制上述 HTML 与 JS，即可开箱即用——简洁、高效、符合现代 Web 开发规范。
