时间戳

首页 > 解决方案 > 自动调整多个文本区域的高度以适应加载的内容

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

问题描述

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

能否以更好的方式完成？

标签： javascripthtmlformstextarea

解决方案

看看这个片段：

<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>通过类名查找所有这些并将它们存储在一个数组中。接下来我们遍历数组并将样式应用于 all <textarea>。

推荐阅读