在动态创建的文本区域上自动调整大小

Question

我正在使用 autosize.js 在我的报告中生成自动扩展文本区域。

它在加载项目时效果很好，但我有一个按钮可以在报告中添加一个新行，并且对于所有那些新创建的文本区域，自动调整大小没有应用。

初始设置。

    $( 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 方法，但我无法让它工作。

Once you've assigned autosize to an element, you can manually trigger the resize event by using the 'autosize:update' event. Autosize has no way of knowing when a script has changed the value of a textarea element, or when the textarea element styles have changed, so this event would be used instruct autosize to resize the 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 中的新文本区域。一个简单但不是很有效的解决方案如下：

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

在动态创建的文本区域上自动调整大小

Autosize on dynamically created textarea

jquery

html

autosize