以编程方式插入文本节点后，插入符号在 contenteditable 正文标记中不再可见答案

【问题标题】：Caret no longer visible within contenteditable body tag after inserting a text node programmatically以编程方式插入文本节点后，插入符号在 contenteditable 正文标记中不再可见
【发布时间】：2020-12-12 06:28:48
【问题描述】：

我在 Windows 10 Pro 机器上使用 Mozilla Firefox (83.0)。

使用启用了 contenteditable 属性的简单正文标记，插入文本节点时我的插入符号会消失。我在 Chrome 版本 87.0.4280.88 上进行了完全相同的测试，但它的行为并非如此

这是一个演示。你也可以在https://jsfiddle.net/dg47mkat/1/找到小提琴

setTimeout(function(){ 
    let range = document.getSelection().getRangeAt(0);
    let element = document.createElement('span');
    range.insertNode(element);
 }, 10000);

<html>
<body contenteditable="true">
This is a test
</body>
</html>

确保单击文本中的某处以查看正在显示的插入符号，然后等待分配的超时运行。插入节点后，插入符号不再可见，除非您按箭头键或键入字符。

另外请注意，当有文本选择时，这不会发生。

2020-12-11:12:40 更新我假设它的行为就像在 chrome 中一样，即插入符号保持原样。

【问题讨论】：

所有 ContentEditable API 实现都有自己的怪癖，这似乎是 Firefox 中的怪癖之一。但你的实际问题是什么？可能您想在插入空元素后在某处显示插入符号，但具体在哪里？
我已经更新了我的问题，以提及我希望它做什么。
看起来你需要在创建元素后添加range.collapse(); 。如果您实际上是在向新元素添加文本，则可以将 true 传递给 .collapse 以将光标置于新元素的开头，省略参数或将其设置为 false 将光标移动到末尾的新元素。
@Teemu 虽然我没有提到它，但理想情况下，文本的选择将保持选中状态，我认为在这种特定情况下折叠不会起作用。事实上，如果我们特别关注我提到的工作流程而不进行选择，那么这将解决问题。

标签： javascript html firefox

【解决方案1】：

我能够以一种适用于未选择文本和已选择文本的方式解决此问题。

注意：我所做的更改是克隆该范围，然后重新应用该特定范围。看起来在 Firefox 中这是必需的，但在 Chrome 中却不是。（版本详情参考OP）

 setTimeout(function(){
  let range = document.getSelection().getRangeAt(0);
  let clonedRange = range.cloneRange();
  let element = document.createElement('span');
  range.insertNode(element);
  
  let selection = document.getSelection();
  selection.removeAllRanges();
  selection.addRange(clonedRange);
 }, 10000);

<html>
<body contenteditable="true" id="mybody">This is a test</body>
</html>

【讨论】：

"虽然我没有提到..." 好吧，你没有，但我想不会有更好的建议，就是这样。
对于您以后的问题，请在介绍问题时保留当前行（太好了！），但也总是问一个实际问题，详细说明您需要什么，这样您就没有自己找到最终解决方案，其他用户不必猜测您的问题。