将插入符号移动到内容可编辑的末尾 div 在 IE11 中不起作用

Question

我实现了一个过程，用户从 div 中选择一个选项，并将其插入到可编辑的内容中 div。

为此，首先我将选择范围保存在可编辑 div 的 mouseup 和 keyup 事件上。

当用户点击div的其中一个选项时，它会恢复选择范围，在保存的位置插入文本，并将插入符号移动到插入文本的末尾。此外，我再次保存新的插入符号位置，以防万一用户单击另一个选项，在之前添加的文本旁边插入一个新文本。

它在除 IE11 之外的所有浏览器中都可以正常工作。当用户单击 div 超过 1 次以插入文本时，第一个值将被替换为新值，而不是在第一个插入的文本之后插入。

看来 selection.collapseToEnd() 在 IE11 中运行得不是很好。

如果有人知道解决该问题的好方法，那将非常有帮助。

谢谢。

JSFiddle：https://jsfiddle.net/7k1rt82s/4/

代码：

HTML

<div id="insert-text-div" style="border-style: solid; width: 100px;cursor: pointer;">Option DIV</div>
<div id="editor" contenteditable="true" style="border-style: solid; height: 150px;">Please click on the option div to add a dummy text.</div>

JS

var selectedRange;

$( "#editor" ).on('mouseup keyup', function() {
  // Save selection
  var selection = window.getSelection();
    if (selection.getRangeAt && selection.rangeCount) {
        selectedRange = selection.getRangeAt(0);
    }
});

$('#insert-text-div').on('click', function() {
  if (!selectedRange) return;

  // Get the current selection and set the selection range stored in the Editor mouseup / keyup event
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(selectedRange);

  // Insert the text into the range
  var range = selection.getRangeAt(0);
  range.deleteContents();
  var textNode = document.createTextNode("DummyText");
  range.insertNode(textNode);

  // Move the caret to the end of the added text
  selection.collapseToEnd();
  // Save the selection in case the user immediately inserts another text
  $('#editor').trigger('keyup');
});

Answer 1

我从 MDN 找到了 table 的兼容性，这是一个推荐的资源。其中提到 collapseToEnd 函数的兼容性对于 Internet Explorer 是未知的。

https://developer.mozilla.org/en-US/docs/Web/API/Selection/collapseToEnd .

此外，问题可能出在 null 的范围内，您可以在评论中看得更深入。

https://w3c.github.io/selection-api/#background 笔记请参阅错误 15470。IE9、Firefox 12.0a1、Chrome 17 dev 和 Opera Next 12.00 alpha 都使范围最初为空。

将插入符号移动到内容可编辑的末尾 div 在 IE11 中不起作用

Moving caret to the end in a content editable div not working in IE11

html

javascript

jquery

contenteditable

rich-text-editor