jQuery中的可编辑文本框

Question

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

用户也可以通过双击来编辑他/她的信息。 假设用户名在那里，那么用户可以通过点击它来编辑它。只要他点击UserName，它就可以用它在文本框中的值进行编辑。

我该如何让价值与文本框编辑？

我tried-

$(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属性，是枚举属性，其关键词是空字符串，真，假。空字符串和真关键字映射到真实状态。 false关键字映射到false状态。另外，还有第三种状态，即继承状态，它是缺省值缺省值（以及无效值缺省值）。

DEMO1 | DEMO2

Answer 2

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

Answer 3

你只需要连接val正确：

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

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

Answer 4

尝试这样的：

使用.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