自动调整多个文本区域的高度以适应加载的内容

Posted 2023-05-07

【中文标题】自动调整多个文本区域的高度以适应加载的内容

【英文标题】：Autofit multiple textarea's height to loaded content

【发布时间】：2020-12-10 13:46:18

【问题描述】：

我写了一个 html/php 页面来更新数据库内容。该页面有几个表单（我需要编辑的每个数据库行一个），每个表单都有几个 textarea 字段。

我想使用纯 javascript（无 jQuery）将每个文本区域的高度与其内容（从 db 检索）相匹配。

我找到了以下JS函数：

function autoResize() 
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
 

但是如何将它用于页面中的每个 textarea 字段？有没有更好的方法来实现目标？

谢谢！

更新

也许这是一个很好的解决方案：

var els = document.querySelectorAll('textarea');
Array.from(els).forEach((el) => 
    var offset = el.offsetHeight - el.clientHeight;
    el.style.height = 0;
    el.style.height = el.scrollHeight + offset + 'px';
    el.addEventListener('input', function() 
        el.style.height = el.scrollHeight + offset + 'px';
    );
);

能否以更好的方式完成？

【参考方案1】：

看看这个sn-p：

<script>
    var content = document.getElementsByClassName('db-content');
    for(var i=0; i<content.length; i++)
        content[i].style.height = 'auto';
        content[i].style.height = content[i].scrollHeight + 'px';
    
</script>

你必须对所有<textarea>（上面的sn-p中的db-content）应用相同的类，并在它们之后添加这个脚本。在脚本中，我们通过类名查找所有<textarea> 并将它们存储在一个数组中。接下来我们遍历数组并将样式应用于所有<textarea>。

【讨论】：

它对我不起作用。它只是添加 style="height: auto;"到每个 textarea 标签。

@AbsoluteBeginner 我们可以添加滚动条而不是调整 的高度，因为如果我们根据内容改变高度，所有 <textarea> 看起来高度不均匀，这会使页面难看

@AbsoluteBeginner 这是一个建议而不是命令。回答我来帮助你。