以編程方式插入文本節點后，插入符號在 contenteditable 正文標記中不再可見

Question

我在 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 中一樣，即插入符號保持原樣。

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

以編程方式插入文本節點后，插入符號在 contenteditable 正文標記中不再可見

問題描述

1 個解決方案

解決方案1
1

以編程方式插入文本節點后，插入符號在 contenteditable 正文標記中不再可見

問題描述

1 個解決方案

解決方案1 1

解決方案1
1