Question

我正在尝试制作可编辑的文字。我所拥有的是您单击的一行文本，我需要一个文本框出现，允许用户更改文本的值。使用我所拥有的代码，当您单击文本时消失。有任何想法吗？ HTML

       <div class="test">Click here</div>

jquery的

       $(".test").click(function() {
           var inputValue = $(".test").text();  
           $(".test").html("<input value='"+inputValue+"' 
               type='text' id='box1'>");
           $("#box1").val(inputValue).select();
        });

Answer 1

如果你使用现有的解决方案，也许会更简单。例如：jeditable

但如果你想（见DEMO）：

$(document).ready(function () {
    var beginEdit = function () {
        var text = $(this).text();
        var input = $('<input value="' + text + '" type="text">').one('blur', endEdit);

        $(this).empty().append(input);
    };

    var endEdit = function () {
        var text = $(this).val();
        $(this).parent().html(text).one('click', beginEdit);
    };

    $(".text").one('click', beginEdit);
});

作为jQuery的插件（参见DEMO2）：

$.fn.editable = function () {
    this.each(function () {    
        var beginEdit = function () {
            var text = $(this).text();
            var input = $('<input value="' + text + '" type="text">').one('blur', endEdit);

            $(this).empty().append(input);
        };

        var endEdit = function () {
            var text = $(this).val();
            $(this).parent().html(text).one('click', beginEdit);
        };

        $(this).one('click', beginEdit);        
    });
};

$(document).ready(function () {
    $(".text").editable();
});

Answer 2

取走$("#box1").val(inputValue).select();行。您已经在html()方法中设置了值。另外，在调试器中检查inputValue是否有值。

格雷厄姆指出的是，当你点击它时会变成

<div class="test"><input value="Click here" type="text" id="box1"></div>

点击事件仍然在外部div上，所以当你再次点击它时它会清除文本框。

Answer 3

这个jsFiddle有一个例子。单击一个段落时，jQuery事件处理程序将使用包含段落文本的文本框替换段落中的HTML。

单击新创建的文本框时，其中的文本将消失。这是因为当您单击文本框时，事件处理程序再次触发：段落的HTML（文本框）将替换为包含段落文本的文本框。没有文字，所以现在你得到一个新的空文本框。

有几种方法可以阻止这种情况发生。创建文本框时，您可以更改段落的类，这意味着您的事件处理代码将不再触发。或者，您可以为文本框的click事件设置另一个处理程序，并在此处调用stopPropagation函数。

单击时使文本框保持值。

3 个答案: