jQuery에서 편집 가능한 텍스트 상자

Question

Asp.net MVC4 응용 프로그램에서 작업 중입니다. 사용자 정보가 있거나 편집 버튼이있어 사용자가 정보를 수정하고자 할 때 사용합니다.

사용자는 정보를 두 번 클릭하여 편집 할 수 있습니다. 사용자 이름이있는 경우 사용자가 사용자 이름을 두 번 클릭하여 수정할 수 있다고 가정합니다. 사용자 이름을 클릭하자마자 텍스트 상자의 값으로 편집 할 수 있습니다.

어떻게 텍스트 상자로 값을 편집 할 수 있습니까?

나는

$(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 키워드는 거짓 상태로 매핑됩니다. 또한 세 번째 상태 인 상속 상태가 있는데, 이는 누락 값 기본값 (및 잘못된 값 기본값)입니다.

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

그리고 사업부로 다시 되돌릴 수 : 나를 새로운 오늘 뭔가를 알려 주셔서

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

Demo