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

Question

我有这段代码，从数据库中获取数据（@ 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>
            }

要放置在textarea上的数据库上的某些数据比其他数据包含更多的换行符。

问题：

您如何根据 页面上textarea的内容来改变textarea的高度？

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

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

Answer 1

您可以使用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>