在使用 contenteditable="true" 的表格单元格时，按下 Enter 会自动插入 <br> 标签并换行；通过监听 keydown 事件并调用 e.preventDefault()，可彻底禁用该默认行为，实现“回车不换行、仅触发自定义逻辑”的效果。
在使用 `contenteditable="true"` 的表格单元格时，按下 enter 会自动插入 `
` 标签并换行；通过监听 `keydown` 事件并调用 `e.preventdefault()`，可彻底禁用该默认行为，实现“回车不换行、仅触发自定义逻辑”的效果。
当 <td contenteditable="true"> 接收用户输入时，浏览器默认将 Enter 键视为“插入换行符”操作，自动在 DOM 中添加 <br> 标签——这不仅破坏了表格单元格的单行语义（如用于填写商品名称、数量等结构化数据），还会导致 innerHTML 包含冗余标签，影响后续数据提取与校验。
要正确拦截并阻止该行为，需同时满足两个关键条件：
✅ 使用 keydown 而非 keyup
Enter 键的默认插入行为在 keydown 阶段已触发，若等到 keyup 再处理，<br> 已被写入 DOM，此时 preventDefault() 失效。因此必须监听 keydown 事件。
✅ 及时调用 e.preventDefault()
在检测到 e.key === "Enter" 时立即执行 e.preventDefault()，可阻止浏览器默认的换行插入逻辑，使光标保持在当前行内，且不生成 <br>。
以下是修正后的完整示例代码：
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(); // ✅ 关键：阻止默认换行
console.log("单元格内容：", cell.textContent.trim()); // 推荐用 textContent 获取纯文本
}
});
});
});? 注意事项与最佳实践：
- 若需支持旧版 IE，可补充判断 e.keyCode === 13（但现代项目建议优先使用 e.key）；
- 避免在循环中重复绑定事件——本例中因每次新增行后重新查询 .fill 并绑定，属安全做法；若采用事件委托（推荐用于动态大量元素），可统一监听 <tbody> 的 keydown，再通过 e.target.closest('.fill') 判断来源；
- 获取用户输入时，优先使用 element.textContent 而非 innerHTML，避免误读 <br> 等残留标签，确保数据纯净；
- 如需进一步实现“回车提交+焦点移至下一列”，可在 preventDefault() 后调用 cell.nextElementSibling?.focus() 实现流畅导航。
通过以上调整，即可让 contenteditable 表格单元格真正服务于结构化数据录入——Enter 键不再换行，而是成为可控的数据确认或导航指令。
