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

Question

假设有一种情况，我有一个文本，一旦用户单击这个文本，它就被转换为一个具有相同文本的输入，用户单击该输入作为一个值。

我想知道是否有可能使光标出现在第一次点击发生的地方？

http://jsfiddle.net/nmaqa/

在本例中，用户首先单击以激活编辑，然后再单击要显示光标的位置。

$(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();
        //
    });

Answer 1

我想知道是否有可能使光标出现在第一次点击发生的地方？

我们有一个名为contentEditable的html元素的属性，获取一个看这个样本，并看到您想要实现的是默认行为。

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

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

Answer 2

是的，可以是html。

<ul class="click">
<li contenteditable = true class="editable">Text</li>
<li class="editable" contenteditable = true>Text</li>

​

和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()

请更新代码或检查ik篡改http://jsfiddle.net/nmaqa/1/