在以编程方式插入文本节点后,Caret在contenteditable body标记中不再可见



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

使用启用了contenteditable属性的简单body标记,插入文本节点时插入符号将消失。我在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中一样,即插入符号保持在当前位置

我能够用一种既适用于未选中文本又适用于选中文本的方式来解决这个问题。

注意:我所做的更改是克隆该范围,然后重新应用该特定范围。看起来在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>

最新更新