如何避免contenteditable的td按下Enter时自动添加<br>标签？

当contenteditable="true"的元素按下Enter时，浏览器默认会插入<br>标签来实现换行，这就是你看到控制台输出包含该标签的原因。以下是几种解决思路：

方法1：阻止Enter的默认行为（禁止换行） #

如果不需要在td内换行，直接在按下Enter时阻止浏览器的默认插入动作，这样既不会换行，也不会生成<br>标签。建议把事件监听改为keydown（比keyup更适合拦截默认行为）：

document.querySelector(".add_btn").addEventListener("click", () => {
  const table = `<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", table);
  const fill = document.querySelectorAll(".fill");
  fill.forEach((f) => {
    f.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        e.preventDefault(); // 阻止默认换行行为
        console.log(f.innerHTML); // 此时innerHTML不会包含<br>
      }
    });
  });
});

方法2：获取纯文本内容 #

如果需要保留td内的换行格式，但只想要纯文本内容（不需要HTML标签），可以使用textContent或innerText代替innerHTML：

fill.forEach((f) => {
  f.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      console.log(f.textContent); // 输出纯文本，自动处理换行
      // 也可以用innerText：console.log(f.innerText);
    }
  });
});

方法3：过滤HTML标签 #

如果必须使用innerHTML，可以手动过滤掉<br>标签（或直接移除所有HTML标签）：

fill.forEach((f) => {
  f.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      // 仅替换<br>标签
      const cleanContent = f.innerHTML.replace(/<br\s*\/?>/gi, "");
      // 若要去掉所有HTML标签：const cleanContent = f.innerHTML.replace(/<[^>]*>/g, "");
      console.log(cleanContent);
    }
  });
});

内容的提问来源于stack exchange，提问作者Vivek Rai