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

Question

我有这段代码，从数据库中获取数据(@note.Description)并在文本区域添加数据

@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 的解决方案，其中大部分调整了 textarea onkeypress，这不是我想要的。

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

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>