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

Posted

技术标签:

【中文标题】将插入符号位置设置为零在 chrome 中的 contenteditable 元素的节点内【英文标题】:Set caret position to zero inside node of contenteditable element in chrome 【发布时间】: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 元素时会发生这种情况。 【参考方案1】:

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

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

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

FIDDLE

【讨论】:

以上是关于将插入符号位置设置为零在 chrome 中的 contenteditable 元素的节点内的主要内容,如果未能解决你的问题,请参考以下文章

在 contenteditable div 中的特定位置设置插入符号位置

为啥 Swift Int 零在 objc 代码中被读取为零?

将文本附加到文本区域,但将插入符号位置设置为行尾

在 Tkinter Python 中的条目小部件内设置默认插入符号位置

将插入符号/光标位置设置为字符串值 WPF 文本框的末尾

获取内容可编辑的插入符号位置