我有一个<div contenteditable="true"></div>，当我在其中输入一些内容，然后删除这些内容时，似乎浏览器正在<br>自动将一个元素插入到这个元素中。
有没有人有这方面的经验？知道如何解决吗？
问问题
7718 次
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
于 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(/ /gi, '');
如果你想删除 <br> 你可以使用：
str = $('div[contenteditable="true"]');
str.replace(/<br>/gi, '');
于 2022-01-27T10:42:22.617 回答