Javascript-自动将多个textarea的高度调整为已加载的内容

问题描述

我写了一个html / PHP 页面来更新数据库内容。该页面具有多种形式（我需要编辑的每个数据库行都有一种形式），并且每种形式都有多个textarea字段。

我想使用纯JavaScript（不使用jQuery）使每个textarea的高度适合其内容（从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';
    });
});

可以用更好的方法吗？

解决方法

查看此代码段：

<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>（上面的片段中的db-content），然后在其后添加此脚本。在脚本中，我们通过它们的类名查找所有<textarea>并将它们存储在数组中。接下来，我们遍历数组并将样式应用于所有<textarea>。

forms html javascript textarea