jquery를 사용하여 사용자 입력이있는 문단을 편집하십시오.

Question

CRUD 시스템과 같은 편집 기능입니다. 사용자가 항목을 한 번 클릭하거나 두 번 클릭하여 필드를 직접 필드로 변환하면 데이터 .. 문제는 내가 필드에 아무 것도 입력 할 수 있습니다 here

, 내가 왜 궁금

데모 ...

HTML을

<li style="list-style:none">click here to edit</li> 

를 업데이트

내 아미고, 당신이 매번 당신은 그래서 당신은 정말 빨리 (농담)를 입력해야합니다를 선택하고 새로운 입력을 추가하는

$(document).ready(function(){ 

$('li').click(function(){ 
    $(this).html("<input id='input' type='text'>"); 
}); 

$('#input').blur(function(){ 
    var newVal = ('#input').val(); 
     $('li').text('newVal'); 
    }); 
}); 

Answer 1

텍스트 필드를 클릭하면 'li'이 (가) 클릭되기도합니다. 따라서 기존 텍스트 필드를 클릭하면 새로운 텍스트 필드가 추가됩니다. http://jsfiddle.net/DNmNE/5/

그리고 코드 :

$(document).ready(function(){ 
    $('li').click(function(){ 
     input = $("<input id='input' type='text'>").blur(function(){ 
      $('.editable').removeClass('editable'); 
      var newVal = $(this).val(); 
      $('li').text(newVal); 
     }); 
     if (!$(this).hasClass('editable')) 
      $(this).addClass('editable').html(input); 
    }); 
    }); 

가 나는 텍스트 필드가 이미 열려있는 경우 감지 할 .editable 클래스를 사용 여기

는 작업 바이올린입니다.

Answer 2

잘 JQuery와. 하지만 그게 문제 야. 리 클릭 기능이 느슨합니다.

Answer 3

그냥 생각했지만 HTML5contenteditable 기능을 사용 해본 적이 있습니까?

http://html5demos.com/contenteditable

물론, 오래된 브라우저에서 작동하지 않을,하지만 당신은 그 관심을하지 않는 경우 응용 프로그램이 성장함에 따라 그것은 당신에게 많은 작업을 절약 할 수 있습니다.