如果内容为空，则在可编辑的HTML元素中插入“<br>”。

Question

我有一个<div contenteditable="true"></div>，当我在其中输入一些内容，然后删除这些内容时，似乎浏览器会自动将<br>元素插入到此元素中。

有没有人有相关经验？知道如何解决？

- Tri Nguyen

---

这在哪个浏览器中发生的？ - Kermit

在什么情况下？你是修改文件，还是只是在控制台中搞弄DOM之类的东西？ - Kai Qing

一个div应该总是像<br>一样分隔自己，因为它是一个块级元素。 - NoBugs

@njk 我目前只在Chrome中注意到了这个问题。 - Tri Nguyen

@KaiQing 不是这样的。contenteditable 允许你直接从浏览器向 div 中添加内容。 - Tri Nguyen

遇到相同的问题，请分享如果有人有解决方案。 - Inzmam ul Hassan

Answer 1

请使用SPAN元素作为您的contenteditable元素，而不是DIV元素。

请完整阅读以下内容。 问：为什么这个想法有效？ 答：Span是一个内联元素，而Div是一个块级元素。当默认为空时，块级元素将具有零尺寸（如果未对块级元素应用填充）。相比之下，空的内联元素往往会保持其高度，宽度变为零。 因此，我们只需要为此Span（或任何内联元素）提供适当的宽度，但是内联元素不会将宽度作为属性，因此我们需要指定该内联元素的显示为inline-block或block。

我广泛地使用这个想法来创建在线编辑器。希望这可以帮助到您。

注意：更改内联元素的显示为block / inline-block，并不意味着元素的性质已经改变。它仍然是一个内联元素，因此内联元素永远无法在其中容纳块级元素。

- Shyam Swaroop

---

忘了提一下。当空时，span元素不会添加BR，因为它们保持其高度。 - Shyam Swaroop

谢谢，用 span 替换 div 解决了我的问题。 - Iman Sedighi

有趣的是，你仍然可以使用这种方法来拥有多行编辑器。当你按下 Enter 键时，浏览器会添加 <br> 标签，但当你按下 Space 键时则不会。 - trysis

Answer 2

在开发Web应用的一个功能时，我曾遇到过这个问题。这是浏览器的默认行为，就像文本编辑器中的换行一样。最好的处理方式是在提交/抓取内容时对其运行正则表达式以删除标签，并在没有可用文本时将其清空。

通常我使用<br>标签来确定我的换行位置。某些浏览器使用<p>标签，因此请务必进行跨浏览器测试。

- Robin Schultz

---

谢谢。目前我只是检查内容是否为<br>，并将其视为空的情况来处理。这似乎有点hackish。想知道是否有更好的解决方案。 - Tri Nguyen

Answer 3

解决这个问题的另一种方法是改变元素内部处理空白的方式。使用CSS：

white-space: pre-wrap;

查看此链接获取两个解决方案。

- Shyam Swaroop

Answer 4

我终于能够复现这个问题了。无论元素的类型是什么，当它内部的所有元素节点都为空（textContent===''）时，可编辑元素将被插入到一个<br>元素中。

这里提供一个稳定的示例来复现此问题：

<p
      style={{ padding: 10 }}
      contentEditable tabIndex={1}>
      <span></span>
      {"123"}
      <span></span>
    </p>

将元素类型从p更改为span无法解决问题。

因此，建议事先检查空元素并将其删除。

- Sailist

Answer 5

对我而言，这似乎很好用。如果你想去掉空格，可以使用以下代码：

str = $('div[contenteditable="true"]');
str.replace(/ /gi, '');

如果你想移除 <br>，可以使用以下方法：

str = $('div[contenteditable="true"]');
str.replace(/<br>/gi, '');

- Iwalewa Fawaz

Answer 6

这个问题发生在我使用 $(window).KeyUp 事件的回调函数没有返回值时。一旦在注册的回调函数中应用了 "return true"，contenteditable div 就停止应用不必要的 br 标签。

- Miki Amit

Answer 7

当我将元素的内容设置为可编辑时，我遇到了同样的问题，我发现在我将元素的内容设置为可编辑时，在该点插入了一个
，同时我从元素中删除了换行符。这对我完美地起作用了。

 myselect.attr('contenteditable', 'true'); 
 myselect.find('br').remove();

- Inzmam ul Hassan

---

不，如果您执行myselect.find('br').remove();，它会删除所有的<br>标签，这不是一个好方法。更好的方式是将其更改为myselect.find("br:last-child")以仅删除最后一个<br>标签。 - Muhammad Musavi

Answer 8

刚刚找到了一个简单的CSS解决方案，可以不显示换行符：

.myEditable br
  {
  display: none;
  }
.myEditable div
  {
  display: inline;
  }

- Jérémy GUILBAUT