在使用 contenteditable="true" 的表格单元格（如 ）时，按下 Enter 键默认会插入 换行标签，破坏表格结构。本文提供简洁可靠的解决方案：监听 keydown 事件并调用 e.preventDefault() 阻止默认行为。

在使用 `contenteditable="true"` 的表格单元格（如 `

`）时，按下 enter 键默认会插入 `
` 换行标签，破坏表格结构。本文提供简洁可靠的解决方案：监听 `keydown` 事件并调用 `e.preventdefault()` 阻止默认行为。

当 HTML 元素设置为 contenteditable="true"（例如表格中的 <td>），浏览器会将其视为富文本编辑区域，因此 <strong>Enter 键的默认行为是插入 <code><br> 标签，而非提交或换行逻辑——这在表格数据录入场景中通常不符合预期。

要彻底避免该行为，需同时满足两个关键条件：

✅ 使用 keydown 而非 keyup 事件
因为 keydown 在浏览器执行默认动作（如插入 <br>）之前触发，而 keyup 已晚于该动作，此时 preventDefault() 无效。

✅ 在 Enter 触发时立即调用 e.preventDefault()
这能拦截浏览器原生的换行插入逻辑，确保 innerHTML 不被污染。

以下是修正后的完整示例代码（含 HTML 结构与基础样式）：

<button class="add_btn">Add Row</button>
<table>
  <thead>
    <tr class="table_heading">
      <th>Item</th>
      <th>Quantity</th>
      <th>Rate</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #333; padding: 8px; text-align: left; }
</style>

<script>
document.querySelector(".add_btn").addEventListener("click", () => {
  const tableRow = `
    <tr>
      <td contenteditable="true" class="fill items"></td>
      <td contenteditable="true" class="fill quan"></td>
      <td contenteditable="true" class="fill rate"></td>
    </tr>`;

  document.querySelector(".table_heading").insertAdjacentHTML("afterend", tableRow);

  // 为新添加的所有可编辑单元格绑定事件（注意：需在插入后重新获取）
  const fillCells = document.querySelectorAll(".fill");
  fillCells.forEach(cell => {
    cell.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        e.preventDefault(); // ✅ 关键：阻止 <br> 插入
        console.log("Cell content:", cell.textContent.trim()); // 推荐用 textContent 替代 innerHTML 避免标签干扰
      }
    });
  });
});
</script>

⚠️ 注意事项：

• 若后续动态新增行，需确保每次插入后重新绑定事件监听器（如本例所示），不可仅在页面加载时一次性绑定；
• 如需支持“Shift+Enter”换行（类似富文本编辑），可扩展判断：if (e.key === "Enter" && !e.shiftKey)；
• textContent 比 innerHTML 更安全可靠——它返回纯文本内容，避免 <br>、<div> 等意外标签干扰业务逻辑（如提交表单或计算数值）。<p>通过以上调整，Enter 键将不再破坏表格结构，转而成为你自定义交互（如聚焦下一单元格、保存数据或新增行）的理想触发器。</p> </div>