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

Is it possible to start editing of input exactly where click happened when input is created after click?

本文关键字：单击 输入 位置 编辑 开始 创建 是否      更新时间：2023-09-26

想象一下一种情况，我有一个文本，一旦用户单击此文本，它就会转换为具有用户单击的相同文本的输入作为值。

我想知道是否有可能使光标准确地出现在点击发生的位置？

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

我想知道是否有可能使光标准确地出现在位置 点击首先发生了？

我们为任何名为 html 元素的属性contentEditable看看此示例，看看你想要实现的是默认行为。

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

请务必注意，无需实现此替换逻辑即可启用对文本元素的编辑。

是的，这是可能的.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/

相关文章：