Question

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

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

Answer 1

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

我通常使用＆lt; br＆gt;标记，以确定我的换行符的位置。有些浏览器使用＆lt; p＆gt;标签，所以一定要进行跨浏览器测试。

Answer 2

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

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

我广泛使用这个想法来创建在线编辑器。希望这会有所帮助。

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

Answer 3

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

defaults write com.apple.CoreSimulator.IndigoFramebufferServices FramebufferEmulationHint 2

查看this link两个解决方案。

Answer 4

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

public class ProvisioningITestSuite extends RdpArquillianTest {

    @Inject
    private PathConfigForTest pathConfig;

    public void prepareDirsForProvisioningTests(@Observes BeforeSuite event) throws IOException {
        Files.newDirectoryStream(pathConfig.getVdfsTargetBwkSignalOutputDir().toPath()).forEach(file - >{
            try {
                Files.delete(file);
            } catch(IOException e) {
                e.printStackTrace();
            }
        });

        Files.newDirectoryStream(pathConfig.getVdfsTargetPrdCompleteSupplyDir().toPath()).forEach(file - >{
            try {
                Files.delete(file);
            } catch(IOException e) {
                e.printStackTrace();
            }
        });
    }
}

Answer 5

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

如果留空，则插入到contenteditable html元素中

5 个答案: