0

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

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

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

2 回答 2

0

是的，它可能是 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 fiddle http://jsfiddle.net/nmaqa/1/

于 2013-10-31T23:35:40.040 回答
0

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

我们有一个用于任何 html 元素的属性，称为contentEditable 查看此示例并查看您要实现的内容是默认行为。

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

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

于 2013-11-01T10:40:28.440 回答