如何避免换行

Question

当我在 td 中写入内容并按 Enter 键时，我会得到一个新行。在控制台中，我得到了我写的所有内容 + br 标签。我该如何解决它？

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("keyup", (e) => {
      if (e.key == "Enter") {
        console.log(f.innerHTML);
      }
    });
  });
});```

Answer 1

您的问题需要两个修复。

1. 防止

   Enter

   键的默认行为，即在

   <br>

   元素中插入换行符

   contenteditable

   。 按下 Enter 键时在事件监听器中调用

   e.preventDefault()

   。
2. 将事件类型从

   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(); // Prevent the default behavior of the Enter key
        console.log(f.innerHTML);
      }
    });
  });
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

<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>