27

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

有没有人有这方面的经验？知道如何解决吗？

4

6 回答 6

15

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

请完整阅读。问：为什么这个想法有效？A. Span 是内联元素，Div 是块元素。默认情况下，空的块元素将具有零维度（如果没有对块元素应用填充）。相反，空的内联元素倾向于保持它们的高度和宽度变为零。因此，我们只需要为此 Span（或任何内联元素）提供适当的宽度，但是内联元素不会将宽度作为属性，因此我们需要将此内联元素的显示指定为 inline-block 或 block .

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

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

于 2018-04-27T09:12:36.787 回答
5

在为 Web 应用程序开发功能之前，我遇到了这个问题。这是浏览器的默认行为。它与文本编辑器的换行符相同。处理它的最佳方法是在提交/抓取内容以删除标签时对内容运行 RegEx，然后在没有文本可用时将其空白。

我通常使用 <br> 标签来确定我的换行符在哪里。有些浏览器使用 <p> 标签，所以一定要跨浏览器测试它。

于 2013-02-01T02:55:43.980 回答
4

解决此问题的另一种方法是更改​​元素内部处理空白的行为。使用 CSS：

white-space: pre-wrap;

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

于 2018-04-27T15:50:47.213 回答
0

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

于 2018-05-18T20:27:48.163 回答
0

当我使元素内容可编辑时，我遇到了同样的问题，我发现在我使元素内容可编辑
的点插入了一个，同时我从元素中删除了中断。这对我来说非常有用。

 myselect.attr('contenteditable', 'true'); 
 myselect.find('br').remove();
于 2016-12-30T09:40:08.367 回答
0

这对我来说似乎很好。如果要删除空格，可以使用：

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

如果你想删除 <br> 你可以使用：

str = $('div[contenteditable="true"]');
str.replace(/<br>/gi, '');
于 2022-01-27T10:42:22.617 回答