Question

我有一个简单的HTML，如下所述。删除第一段时（三次点击并点击删除）。＆＃34; span2＆＃34;流入＆＃34; FirstPara＆＃34;我看到像＆＃34; id＆＃34;和＆＃34;班＆＃34;不保留。为什么会这样？有没有办法阻止这种情况发生？

＆＃13;

<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>

＆＃13;

Answer 1

我认为，如果你三次点击，你选择白色空间whot创建“SecondPara”并删除它们。保持第一个和第二个结束的开始=浏览器第一个完整。

我在使用Span place段落中看到的解决方案，并为此跨度更改了css。

Answer 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

删除段落时，为什么某些span属性会丢失？

2 个答案: