Textarea隨文字增長

我正在爲商業應用程序做一些評論功能。每個註釋是，如果你點擊它，它變成了一個textareaTextarea隨文字增長

問題的跨度是我想要的文字區域採取相同的空間量作爲它的文本（如跨度不進行編輯時）

我已經找到解決方案，讓行與文本增長（jQuery Autosize等），但有沒有任何解決方案，使寬度和高度與文本增長？

編輯：在其編輯模式的標記看起來是這樣的（使用淘汰賽，所以這是動態渲染HTML的樣子，實際KO HTML是不同的）

<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：所以這是唯一的解決方案：將cols設置爲textarea中最長的行，並將文本區域的最大寬度設置爲parent-width減去總步驟寬度？沒有使用CSS或jQuery的清潔盒子解決方案？

來源

2013-03-26 Anders

計算機如何知道約束，如果寬度和高度都可能增長？ – Sablefoste 2013-03-26 13:10:27

對不起，這是一個很好的問題，我忘了，它不應該長得多，它自己和它的內聯兄弟姐妹可以適合父母寬度 – Anders 2013-03-26 13:29:01

高度是不受限制的 – Anders 2013-03-26 13:40:54

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


<div contenteditable>Type me</div>

來源

2013-07-29 13:58:12 Delta

您將不得不動態調整keyup和keydown上textarea的高度。將高度指定爲自動，以便scrollHeight反映所需的高度，然後爲其重新分配高度。看看下面的代碼：

 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(); 
      }); 
     });

來源

2017-02-26 19:44:48 newbie

Textarea隨文字增長

回答

相關問題