如何在加载时自动调整文本区域元素的大小？

Question

我创建了一个自动扩展的 textarea 元素，它根据其中的文本内容动态增长，效果很好。 我通过查看滚动高度然后将其添加到文本区域的高度来做到这一点。

我遇到的问题是，当我通过 value 属性在初始加载时将文本加载到相同的 textarea 时 - 它会恢复到初始高度，并且只有在我专注于 textarea 并按 Enter 时才会自动扩展，这意味着它会裁剪掉很多内容（特别是在涉及多行项目的情况下）。

一段时间以来，我一直在尝试想出一个解决方法，但到目前为止我还没有找到解决方案。 有没有一种方法可以确定容器的滚动高度，就好像用户在 mount 上键入了一些东西以将 textarea 扩展到相同的高度？

编辑：为混乱道歉，当我回忆起从数据库输入到同一个文本字段中的相同文本时，问题就出现了

（添加照片以证明我的问题）

添加的照片：在 textarea 中添加时的文本

加载/安装上的相同文本

（在第二张图片中，您可以看到在将文本保存到数据库并注入回同一文本区域后，文本区域已恢复到原来的高度）

Answer 1

 $("textarea").height( $("textarea")[0].scrollHeight );

 textarea { width: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <textarea> I have created an auto expanding textarea element that dynamically grows based on the text content within it which works great. I do this by looking at the scroll height and then adding this to the height of the textarea. The problem I have is when I load text into the same textarea on initial load via the value prop - it reverts back to it's initial height and only auto expands when I focus in on the textarea and hit enter which means it's cropping out a lot of the content (especially where multi-line items are concerned). I've been trying to come up with a workaround for a while and I haven't managed to find a solution as of yet. Is there a way I can determine the scroll height of the container as if the user had typed something on mount to expand the textarea to the same height? </textarea>

Answer 2

这应该有效：

 let textarea = document.querySelector('textarea') function auto_grow(element){ element.style.height = (element.scrollHeight) +"px" }

 textarea{ resize: none; overflow: hidden; height: 1000px; font-size: 15px; line-height: 1.5em; }

 <textarea oninput = "auto_grow(textarea)"></textarea>