Question

我正在使用 autosize.js 在我的报告中生成自动扩展textareas。

它在加载项目方面效果很好，但是我有一个按钮可以在报告中添加一个新行，对于所有新创建的textareas，不会应用自动调整大小。

初始设置。

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

我看过UPDATE的{{1}}方法，但我无法让它发挥作用。

为元素分配自动调整大小后，您可以手动触发使用'autosize：update'事件调整resize事件。自动调整没有知道脚本何时更改textarea值的方法元素，或者当textarea元素样式发生变化时，所以这个将使用event指示autosize来调整textarea的大小。

autosize

我可以在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);函数中使用哪些内容将其重新应用到所有文本区域？

Answer 1

我认为你只需重新申请＆＃34; autosize＆＃34;当你加载页面时，函数到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);
        });
    }

自动调整动态创建的textarea

1 个答案: