클릭시 텍스트 상자 보류 값을 만듭니다.

편집 가능한 텍스트를 만들려고합니다. 내가 가지고있는 것은 사용자가 클릭하는 텍스트 줄이며 사용자가 텍스트 값을 변경할 수 있도록 텍스트 상자가 필요합니다. 내가 가지고있는 코드를 클릭하면 텍스트가 사라집니다. 어떤 아이디어? 기존 솔루션을 사용할 경우 HTML클릭시 텍스트 상자 보류 값을 만듭니다.

 <div class="test">Click here</div>

JQuery와

 $(".test").click(function() { 
      var inputValue = $(".test").text(); 
      $(".test").html("<input value='"+inputValue+"' 
       type='text' id='box1'>"); 
      $("#box1").val(inputValue).select(); 
     });

출처

2012-07-31 David Nuckols

... 텍스트 상자의 기본 동작입니까? – Brad

예, 값을 보유해야합니다. –

이해가 안됩니다. 텍스트 상자는 모두 자체적으로 수행합니다. 값이 있으면 클릭하기 만하면 입력 할 때까지 아무런 변화가 없습니다. – Brad

은 아마 더 간단 할 것이다. jeditable

그러나 당신이 원하는 경우 (DEMO 참조) : jQuery를위한 플러그인으로

$(document).ready(function() { 
    var beginEdit = function() { 
     var text = $(this).text(); 
     var input = $('<input value="' + text + '" type="text">').one('blur', endEdit); 

     $(this).empty().append(input); 
    }; 

    var endEdit = function() { 
     var text = $(this).val(); 
     $(this).parent().html(text).one('click', beginEdit); 
    }; 

    $(".text").one('click', beginEdit); 
});

(DEMO2 참조) 예를 들어

$.fn.editable = function() { 
    this.each(function() {  
     var beginEdit = function() { 
      var text = $(this).text(); 
      var input = $('<input value="' + text + '" type="text">').one('blur', endEdit); 

      $(this).empty().append(input); 
     }; 

     var endEdit = function() { 
      var text = $(this).val(); 
      $(this).parent().html(text).one('click', beginEdit); 
     }; 

     $(this).one('click', beginEdit);   
    }); 
}; 

$(document).ready(function() { 
    $(".text").editable(); 
});

출처

2012-07-31 15:38:31

제 3 자 pluggins를 제한하고 싶습니다. –

라인 $("#box1").val(inputValue).select();을 가져가. 이미 html() 메소드에서 값을 설정했습니다. 또한 inputValue에 값이 있음을 디버거에서 확인하십시오. 그레이엄 지적 무엇

는

를 클릭 할 때 분명히 텍스트 상자를 다시 클릭하면 그렇게 외부 DIV에 여전히 클릭 이벤트와

<div class="test"><input value="Click here" type="text" id="box1"></div>

으로 변이었다.

출처

2012-07-31 15:44:47

디버거에는 값이 있습니다. 그것은 잘 작동, 그냥 텍스트 입력 상자에서 텍스트 상자에서 클릭 후 남아있는 값이 필요합니다. –

이 jsFiddle에는 예제가 있습니다. 단락을 클릭하면 jQuery 이벤트 핸들러가 단락의 HTML을 단락의 텍스트가 들어있는 텍스트 상자로 바꿉니다.

새로 만든 텍스트 상자를 누르면 텍스트가 사라집니다. 이는 텍스트 상자를 클릭하면 이벤트 핸들러가 다시 발생하기 때문입니다. 단락의 HTML (텍스트 상자)은 단락의 텍스트가 들어있는 텍스트 상자로 바뀝니다. 텍스트가 없으므로 이제 빈 텍스트 상자가 생깁니다.

몇 가지 방법으로이 문제를 방지 할 수 있습니다. 텍스트 상자를 만들면 단락의 클래스를 변경하여 이벤트 처리 코드가 더 이상 발생하지 않도록 할 수 있습니다. 또는 텍스트 상자의 click 이벤트에 대해 다른 처리기를 사용할 수 있으며 여기에서 stopPropagation 함수를 호출 할 수 있습니다.

출처

2012-07-31 15:46:37

문제는 그 값을 보유하지 않는다는 것입니다. 편집 할 때 그 값을 유지해야합니다. 예를 들어 텍스트를 클릭하면 값을 편집 할 수있는 상자에 텍스트가 있어야합니다. 예를 들어 "Bob"에서 "Bob Smith"로 값을 변경해야하는 경우 "Smith" 그리고 전체 가치가 아닙니다. –

방금 테스트 해 본 결과이 점을 내놓았습니다 –

@DavidNuckols 예 문제를 이해합니다. 그러나 문제는 텍스트 상자가 "값 보유"가 아니라, 텍스트 상자가 새 텍스트 상자로 대체되고이 새 텍스트 상자에 텍스트가 포함되어 있지 않다는 것입니다. 다른 예제를 추가하겠습니다 ... –

클릭시 텍스트 상자 보류 값을 만듭니다.

답변

관련 문제