Question

我正在开发Asp.net MVC4应用程序。我有用户的信息和编辑按钮，以防任何用户想要编辑他/她的信息。

用户也可以通过双击来编辑他/她的信息。假设用户名是否存在，则用户可以通过单击双击来编辑用户名。只要他点击UserName，就可以在文本框中使用其值进行编辑。

如何使用文本框编辑值？

我试过了 -

$(function(){
    $('.double').on('dblclick',function(){
        var val=$(this).html();
        $(this).append('<input type="text" value=val/>');
    });
});

但没有成功。

Fiddle

Answer 1

尝试使用contentEditable attribute

$(".double").get(0).contentEditable = "true";

contenteditable属性是枚举属性，其关键字为空字符串，true和false。空字符串和true关键字映射到true状态。 false关键字映射到false状态。此外，还有第三个状态，即继承状态，它是缺省值缺省值（默认值无效）。

DEMO1 | DEMO2

Answer 2

试试这样：

使用.replaceWith()：

$(document).on('dblclick', '.double' function() {
    var val = $(this).text();
    $(this).replaceWith('<input type="text" value="' + val + '" class="username" />');
});

然后回到div：

$(document).on('blur', '.username', function() {
    var val = $(this).val();
    $(this).replaceWith('<div class="double">' + val + '</div>');
});

Demo

Answer 3

$(function(){
    $('.double').on('dblclick',function(){
        var val=$(this).text();
        $(this).append('<input type="text" value=\"' + val + '\" />');
    });
});

Answer 4

您只需要正确连接val：

$(this).append('<input type="text" value="'+val+'">');

http://jsfiddle.net/asifrc/wKAvs/3/

jQuery中的可编辑文本框

4 个答案: