javascript - Editable textbox in jQuery

Question

I am working on Asp.net MVC4 application. I have user's information and edit button in case any user wants to edit his/her information.

A user can edit his/her information by double clicking on it also. Suppose if a username is there then user can edit it by clicking double on it. As soon as he clicks on UserName it is editable with its value in a textbox.

How can i make value editable with textbox?

I tried-

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

But no success.

Fiddle

Answer 1

尝试使用contentEditable 属性

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

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

演示1 | 演示2

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>');
});

演示

Answer 3

您只需要val正确连接：

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

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

Answer 4

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