javascript - jQuery 中的可编辑文本框

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";

the contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

DEMO1 | DEMO2