将插入符号位置设置为零在 chrome 中的 contenteditable 元素的节点内答案

【问题标题】：Set caret position to zero inside node of contenteditable element in chrome将插入符号位置设置为零在 chrome 中的 contenteditable 元素的节点内
【发布时间】：2016-11-30 19:22:00
【问题描述】：

我必须创建一个简单的文本编辑器。不需要在所有浏览器中工作，如果它可以在最新的 firefox 和 chrome 中工作就足够了。

所以问题是，我有一个带有子节点的内容可编辑的 div，当我进入一个节点时，它的步骤自动到第一个字母之后。是否可以将插入符号设置为零位置？

FIDDLE

<div contenteditable="true">
  some <span>text</span> other text
</div>

当插入符号进入 chrome 的跨度时，插入符号会自动放置在 t 之后。我厌倦了用选择和范围来设置位置，但它不起作用。

更新：已解决，请参阅我的回答，了解如何操作。

在 Firefox 中按我的意愿工作。

【问题讨论】：

这个小提琴是否应该证明这个问题，因为它在 chrome 和 firefox 中的行为相同。
当我使用 firefox 时，插入符号放在 '>' 之后（span:before content）。在 chrome 中，插入符号放在跨度标记内的 t 字母之后。当我按箭头键并进入 span 元素时会发生这种情况。

标签： javascript html google-chrome selection contenteditable

【解决方案1】：

谢谢大家，找到解决方案真是太累了。

如果子 eleme (sapn) 的 contenteditable 属性为 true，则它的工作。

<div contenteditable="true">
  some <span contenteditable="true">text</span> other text
</div>

FIDDLE

【讨论】：