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

Question

我写了一个 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';
    });
});

能否以更好的方式完成？

Answer 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>。