为什么删除段落时会丢失一些 span 属性？答案

【问题标题】：Why are some of the span attributes lost when deleting a paragraph?为什么删除段落时会丢失一些 span 属性？
【发布时间】：2015-04-27 08:07:55
【问题描述】：

我有一个简单的 HTML，如下所述。当第一段被删除时（三次单击并点击删除）。 “span2”流入“FirstPara”，我看到“id”和“class”等属性没有保留。为什么会这样？有没有办法阻止这种情况发生？

<div id="MainDiv" contenteditable="true" style="height: 200pt; width: 300pt;">
    <p id="FirstPara">
        <span id="span1" class="Test1" style="font-weight: bold;">FirstParagraph</span>
    </p>
    <p id="SecondPara">
        <span id="span2" class="Test2" style="font-style: italic;">SecondParagraph</span>
    </p>
    <p id="ThirdPara">
        <span id="span3" class="Test3" style="text-decoration-line: underline;">ThirdParagraph</span>
    </p>
</div>

【问题讨论】：

什么浏览器和操作系统？它是否发生在其他浏览器/操作系统上？
我在 Windows 8 上的 Chrome 42 中看到了这种行为
我在 Mac OS 上的 Chrome 42、Chrome Canary 44、Safari 8 上观察到了这一点

标签： html contenteditable

【解决方案1】：

我认为是因为，如果您三次单击，您会选择创建“SecondPara”的空白并删除它们。保留第一个和第二个结束的开头 = 浏览器第一次满。

我在使用 Span 放置段落并为此跨度更改 css 时看到的解决方案。

【讨论】：

【解决方案2】：

问题是选择范围从textNode的开头开始，到#SecondPara的开头结束：

var sel = window.getSelection();
var range = sel.getRangeAt(0);
range.startContainer; // TextNode: "FirstParagraph"
range.startOffset; // 0;
range.endContainer; // <p id="SecondPara">...</p>
range.endOffset; // 0

解决此问题的唯一方法是手动将选择更改为仅包含 #FirstPara，但这可能会有点棘手，使其在所有条件下都能正常工作（您必须考虑反向选择，浏览器兼容性等）请参阅这个类似的问题作为起点：Firefox triple click selection returns incorrect start and end offsets

【讨论】：

谢谢 JosiahDaniels，你是对的，如果是这种情况，那么 SecondPara 是否有多个跨度是否重要？因为我看到的是用以下内容替换标签
...
的行为不同。它实际上是保留属性。
SecondParagraph DummySpan
我当然可以看到向 SecondPara 添加更多跨度可以改变事情。我对浏览器的元素合并/删除算法不是很有信心，但 SecondPara 包含两个跨度这一事实肯定会有所作为。