在使用 contenteditable="true" 的表格单元格（如 ）时，按下 Enter 键默认会插入 换行标签，破坏表格结构。本文提供简洁可靠的解决方案：监听 keydown 事件并调用 e.preventDefault() 阻止默认行为。 在使用 `contenteditable="true"` 的表格单元格（如 ``）时，按下 Enter 键默认会插入 `` 换行标签，破坏表格结构。本文提供简洁可靠的解决方案：监听 `keydown` 事件并调用 `e.preventDefault()` 阻止默认行为。当 HTML 元素设置为 contenteditable="true"（例如表格中的 ），浏览器会将其视为富文本编辑区域，因此 Enter 键的默认行为是插入 标签，而非提交或换行逻辑——这在表格数据录入场景中通常不符合预期。要彻底避免该行为，需同时满足两个关键条件：✅ 使用 keydown 而非 keyup 事件 因为 keydown 在浏览器执行默认动作（如插入 ）之前触发，而 keyup 已晚于该动作，此时 preventDefault() 无效。✅ 在 Enter 触发时立即调用 e.preventDefault() 这能拦截浏览器原生的换行插入逻辑，确保 innerHTML 不被污染。以下是修正后的完整示例代码（含 HTML 结构与基础样式）：Add Row Item Quantity Rate table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #333; padding: 8px; text-align: left; } document.querySelector(".add_btn").addEventListener("click", () => { const tableRow = ` `; 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(); // ✅ 关键：阻止 插入 console.log("Cell content:", cell.textContent.trim()); // 推荐用 textContent 替代 innerHTML 避免标签干扰 } }); }); }); ⚠️ 注意事项： 若后续动态新增行，需确保每次插入后重新绑定事件监听器（如本例所示），不可仅在页面加载时一次性绑定； 如需支持“Shift+Enter”换行（类似富文本编辑），可扩展判断：if (e.key === "Enter" && !e.shiftKey)； textContent 比 innerHTML 更安全可靠——它返回纯文本内容，避免 、 等意外标签干扰业务逻辑（如提交表单或计算数值）。通过以上调整，Enter 键将不再破坏表格结构，转而成为你自定义交互（如聚焦下一单元格、保存数据或新增行）的理想触发器。