range.setStartBefore 和 range.setEndAfter 在 Edge 和 IE11 中无法正常工作

Question

虽然没有错误，而且 Edge 和 IE11 都支持 range.setStartBefore and range.setEndAfter，但没有任何反应。我检查了每个属性，一切看起来都正常，但 highlighting/selecting 没有出现完整范围。

这在 Chrome、Firefox 和 Opera 中正常工作。

为了互动，select 在 lorem ipsum 文本中间输入几个字符或单词。 Chrome、Firefox 和 Opera 将 select 其余的 lorem ipsum 文本，就像他们应该的那样。 Edge 和 IE11 什么都不做。

演示：https://codepen.io/anon/pen/OEVzoe

document.querySelector('div').addEventListener('mouseup', function() {
  var range = window.getSelection().getRangeAt(0);
  range.setStartBefore(range.startContainer.parentNode);
  range.setEndAfter(range.endContainer.parentNode);
});

<div contenteditable="true">
  <p>Hi</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum aspernatur veniam ut accusamus, ratione nemo veritatis itaque, quia esse in recusandae qui pariatur tenetur non optio odio quis fugiat minima.</p>
  <p>Bye</p>
</div>

Answer 1

虽然 Edge 和 IE11 没有视觉上显示它，但范围仍在选择中。您可以通过添加 range.deleteContents(); 作为函数回调的最后一行来看到这一点。

但是，这意味着任何编辑行为（如富文本编辑）更改样式都将仅使用视觉上的内容 selected/highlighted，即使实际范围不同！ :/

range.setStartBefore 和 range.setEndAfter 在 Edge 和 IE11 中无法正常工作

range.setStartBefore and range.setEndAfter don't work in Edge and IE11 in contenteditable

javascript

contenteditable

rich-text-editor