Textarea는 텍스트와 함께 커집니다.

Question

비즈니스 앱에 대한 간단한 설명 기능을 사용하고 있습니다. 각 댓글이 텍스트 영역

문제로 변경 당신이 그것을 클릭하면 스팬 것은 내가 (편집하지 않을 경우 스팬 같은) 텍스트 영역

그 안에 텍스트로 같은 크기의 공간을 할 것입니다

텍스트 (jQuery Autosize 등)로 행이 커지도록하는 솔루션을 찾았지만 텍스트와 함께 너비와 높이를 늘릴 수있는 솔루션이 있습니까?

이 편집 : 그래서 :는 한 EditMode에서 마크 업이 같이 보입니다

<li> 
    <span style="display: none">This is a comment</span> 
    <textarea>This is a comment</textarea> 
    <span class="username">UserOne</span> 
    <span class="timestamp">Mars 26 '13</span> 
</li> 

EDIT2 (넉 아웃을 사용하면 그래서 이것은 실제 KO의 HTML이 다른 같은 동적 렌더링 된 HTML이 모습입니다) 이 유일한 해결책입니다 : cols를 textarea에서 가장 긴 줄로 설정하고 text-area의 최대 너비를 부모 너비에서 전체 자일링 너비까지 빼기로 설정 하시겠습니까? CSS 나 jQuery를 사용하여 이것에 대한 상자 솔루션을 제공하는 클리너가 없습니까?

Answer 1

<style> 
div[contenteditable]{ 
    border: 1px solid black; 
    overflow: none; 
} 
</style> 


<div contenteditable>Type me</div> 

Answer 2

keyup 및 keydown의 텍스트 영역 높이를 동적으로 조정해야합니다. scrollHeight가 필요한 높이를 반영하도록 높이를 auto에 지정하고 높이를 다시 지정하십시오. 다음 코드를 확인하십시오.

 var computedElement = window.getComputedStyle($(element)[0]), 
     paddingTop = parseInt(computedElement.paddingTop), 
     paddingBottom = parseInt(computedElement.paddingBottom), 
     borderBottom = parseInt(computedElement.borderBottom), 
     borderTop = parseInt(computedElement.borderTop), 
     lineHeight = parseInt(computedElement.lineHeight), 
     outerHeight = paddingBottom + paddingTop + borderTop + borderBottom; 

     var resize = function() { 
      //height:auto resets the height to row=1 to get the scrollHeight without white space 
      $(element).css('height', 'auto'); 
      $(element).height($(element)[0].scrollHeight - outerHeight); 
     } 

     //first resize to set the existing text 
     $timeout(function(){ 
      if($(element).val().length) { 
      resize(); 
      } 
     }); 

     //resize on keyup and keydown 
     $(element).on('keydown keyup', function() { 
      $timeout(function(){ 
      resize(); 
      }); 
     });