javascript - 插入符不在 div 上的跨度(contenteditable ="false")之间(contenteditable ="true")

Question

我的插入符不在跨度之间，下面的例子

REPLY||stick together||CONFIRM||stick together||Name||stick together||Office

我所有的跨度都粘在一起，所有跨度都是 contenteditable="false"，我的主要 div 是 contenteditable="true"。

问题 -> 插入符没有出现在这些跨度之间，它出现在所有跨度之前或所有跨度之后。

<div id="variable-message-input-message" class="variable-message__compose" contenteditable="true" name="message">
  Hi
  <span spellcheck="false" contenteditable="false" draggable="true" id="span-First Name" class="variable-message__variable">
       Name
       </span> , This is just a friendly reminder for your upco
  <span spellcheck="false" contenteditable="false" draggable="true" id="span-REPLY ‘2’ to CANCEL" class="variable-message__variable">
       REPLY
       </span>
  <span spellcheck="false" contenteditable="false" draggable="true" id="span-REPLY ‘1’ to CONFIRM" class="variable-message__variable">
       CONFIRM
       </span>
  <span spellcheck="false" contenteditable="false" draggable="true" id="span-Last Name" class="variable-message__variable">
       Name
       </span>
  <span spellcheck="false" contenteditable="false" draggable="true" id="span-Office Location" class="variable-message__variable">
       Office
       </span>
</div>

Answer 1

这是特定于版本的问题，因为我的 chrome 版本是 v75 并且当我更新到最新的 v77 时。我上面的代码片段效果很好。