html - 如何根据其内容在页面加载时设置textarea的高度样式？

我有这段代码，从数据库中获取数据（@ note.Description），并在textareas上添加数据

@foreach (Models.Note note in Model.listNote)
            {
                <li class="sortable list-group-item noteLI @(note.Positive?"list-group-item-success":"list-group-item-danger") @(note.Pinned?BLL.Constants.DisableProperty:String.Empty)">
                    <input type="checkbox" class="completed">
                    <span class="text"><textarea id="@note.NoteId" sort="@note.Sort" class="notes autoExpand w-100" type="text" style="overflow:hidden">@note.Description</textarea></span>
                    <span class="tools">
                        <i class="pinNote fa fa-thumb-tack"></i>
                        <i class="deleteNote fa fa-trash-o"></i>
                    </span>
                </li>
            }

要放在文本区域上的数据库中的某些数据比其他数据包含更多的换行符。

问题：
根据页面加载时文本区域的内容，如何改变文本区域的高度？

检查了stackoverflow的解决方案，大多数解决方案都是在keypress上调整textarea，这不是我想要的。

我希望它在页面加载时看起来像什么

最佳答案

您可以使用scrollHeight属性来确定要将<textarea/>设置为什么大小。

window.onload = () => {
  let textarea = document.querySelector('textarea');
  textarea.style.height = `${textarea.scrollHeight}px`;
}

<textarea id='ta'>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</textarea>