Javascript 在单击后创建输入时，是否可以在单击发生的确切位置开始编辑输入？

想象一种情况，我有一个文本，一旦用户点击这个文本，它就会转换成一个输入，和用户点击的文本一样，作为一个值

我想知道是否有可能使光标精确地显示在最初发生单击的位置

在本例中，用户首先单击以激活编辑，然后需要再次单击希望光标出现的位置

$(document).on("click", ".click li.editable", function(){
        //
        var item = $(this);
        item.removeClass("editable");
        var word = item.html();
        item.empty();
        item.append('<input class="quick-edit" type="text" name="quick_edit" value="'+ word +'" />');
        $(".quick-edit").focus();
        //
    });

$（文档）。在（“单击“，”上。单击li.editable”，函数（）{
//
var项目=$（此项）；
item.removeClass（“可编辑”）；
var word=item.html（）；
item.empty（）；
项目。附加（“”）；
$（“.quick edit”）.focus（）；
//
});

是的，这是可能的 html

文本
文本

和javascript

$(document).on("click", ".click li.editable", function(){
    //
    var item = $(this);
    item.removeClass("editable");
    var word = item.html();
    item.empty();
    item.append('<input class="quick-edit" type="text" name="quick_edit" value="'+ word +'" />');
    $(".quick-edit").focus();
    //
});
   $('.editable:first').focus()

$（文档）。在（“单击“，”上。单击li.editable”，函数（）{
//
var项目=$（此项）；
item.removeClass（“可编辑”）；
var word=item.html（）；
item.empty（）；
项目。附加（“”）；
$（“.quick edit”）.focus（）；
//
});
$（'.editable:first'）.focus（）

请更新代码或检查ik fiddle

我想知道是否有可能使光标精确地出现在哪里 首先发生了什么

我们为任何html元素都提供了一个名为

contentEditable

的属性，看看您想要实现的是默认行为

<div class="prompt" contentEditable=true>
    write the html code  <span style="background-color:blue;">here</span>
</div> 

在这里编写html代码

---

需要注意的是，不需要实现这种替换逻辑就可以对文本元素进行编辑。

下面是一个有趣的问题！这有助于确定立场，这看起来像是你所需要的。查看已接受解决方案评论中的小提琴。我想你误解了我的问题。

<div class="prompt" contentEditable=true>
    write the html code  <span style="background-color:blue;">here</span>
</div>