在動態創建的textarea上自動調整大小

Question

我正在使用autosize.js在我的報告上生成自動擴展textareas。

它在加載項目時效果很好，但是我有一個按鈕在報告中添加新行，並且所有新創建的textareas都未應用autosize。

初始設置。

$(document).ready(function() { 
     $('textarea').each(function(index,textArea){ 
      $(textArea).removeAttr("style"); 
      $(textArea).removeAttr("data-autosize-on"); 
      autosize(textArea); 
     }); 
    } 

功能，增加了一個新行報告

function addRowLines() { 
     var div = document.createElement('div'); 
     div.className = 'row'; 
     div.innerHTML = "<div class='cell100'> <div class='table'> <div class='cell4 content label bordersRight borderBottom bordersLeft bedCol'><textarea id='bed' class='columnClass bedCol label ' name='bed'></textarea></div> <div class='cell12 content label bordersRight borderBottom'><textarea id='Dmg' class='textAreaInput columnClass' name='Dmg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Dg' class='textAreaInput columnClass' name='Dg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Resp' class='textAreaInput' name='Resp'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='CVS' class='textAreaInput' name='CVS'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Fluid' class='textAreaInput' name='Fluid'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Sepsis' class='textAreaInput' name='Sepsis'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> </div> </div>"; 
     document.getElementById('container').appendChild(div); 
    } 

伊夫看了看autosize的UPDATE方法，但我無法得到它的工作。

一旦你分配給自動調整的元素，你可以手動使用觸發 resize事件「自動調整：更新」事件。 Autosize沒有 知道腳本何時更改了textarea元素的值或者textarea元素樣式已更改的方式，因此將使用此 事件來指示autosize調整textarea的大小。

var ta = document.querySelector('textarea'); 

autosize(ta); 

ta.value = "Some new value"; 

// Dispatch a 'autosize:update' event to trigger a resize: 
var evt = document.createEvent('Event'); 
evt.initEvent('autosize:update', true, false); 
ta.dispatchEvent(evt); 

是什麼療法我可以在我addRowLines功能，使用它重新應用到所有的文本區域？

Answer 1

我想你只需要重新應用「autosize」函數到新加載頁面時不在DOM中的textarea。一個簡單而不是非常有效的解決方案如下：

function addRowLines() { 
     var div = document.createElement('div'); 
     div.className = 'row'; 
     div.innerHTML = "<div class='cell100'> <div class='table'> <div class='cell4 content label bordersRight borderBottom bordersLeft bedCol'><textarea id='bed' class='columnClass bedCol label ' name='bed'></textarea></div> <div class='cell12 content label bordersRight borderBottom'><textarea id='Dmg' class='textAreaInput columnClass' name='Dmg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Dg' class='textAreaInput columnClass' name='Dg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Resp' class='textAreaInput' name='Resp'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='CVS' class='textAreaInput' name='CVS'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Fluid' class='textAreaInput' name='Fluid'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Sepsis' class='textAreaInput' name='Sepsis'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> </div> </div>"; 
     document.getElementById('container').appendChild(div); 

     rerunAutosize(); 
    } 


    function rerunAutosize(){ 
     $('textarea').each(function(index,textArea){ 
      $(textArea).removeAttr("style"); 
      $(textArea).removeAttr("data-autosize-on"); 
      autosize(textArea); 
     }); 
    }