Редактируемое текстовое поле в jQuery

Question

Я работаю над приложением ASPP MVC4. У меня есть информация пользователя и кнопка редактирования, если любой пользователь хочет отредактировать свою информацию.

Пользователь может редактировать свою информацию, дважды щелкнув по нему. Предположим, что если есть имя пользователя, пользователь может его отредактировать, щелкнув по нему двойное нажатие. Как только он нажимает на UserName, он редактируется с его значением в текстовом поле.

Как я могу сделать значение редактируемым с помощью текстового поля?

I 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 атрибут перечислимого атрибут, ключевые слова пустая строка, правда, и ложь. Пустая строка и истинная ключевая карта соответствуют истинному состоянию. Ложное ключевое слово сопоставляется с ложным состоянием. Кроме того, существует третье состояние, состояние наследования, которое является отсутствующим значением по умолчанию (и недопустимым значением по умолчанию).

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