在可编辑内容的容器中的元素开头插入文本

Insert text at the beginning of element inside a contenteditable container

本文关键字：元素 开头 插入文本 编辑      更新时间：2023-09-26

示例：http://jsbin.com/vixuse/1/

如何使用范围对象来解决这个问题？

提前谢谢。

我的代码：

<div contenteditable="true">
    Hello World <span>try to insert text in the beginning of this element</span>    
</div>

当用户尝试在span元素的开头插入文本时，结果：

<div contenteditable="true">
    Hello World [INSERTED_TEXT]<span>try to insert text in the beginning of this element</span>    
</div>

我只得到了一个解决方案来解决您的问题，但没有使用Range Object。

您可以将属性contenteditable=false设置为div，然后将与true相同的属性设置为需要编辑的span

由于我不知道你需要的具体使用场景，我的解决方案对你的例子很有用。

如果这对你的戏没用，请不要否决我。

更新

此外，如果您仍然需要整个容器的contenteditable=true，可以将contenteditable=true设置为容器(body或另一个标记(，将false设置为行的标记，并将true设置为需要编辑的标记。

以下是jsbin链接：http://jsbin.com/jolopela/5/edit

谢谢，Edison

相关文章：