[英]How to auto resize the text area element on load?
I have created an auto expanding textarea element that dynamically grows based on the text content within it which works great.我创建了一个自动扩展的 textarea 元素,它根据其中的文本内容动态增长,效果很好。 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).我遇到的问题是,当我通过 value 属性在初始加载时将文本加载到相同的 textarea 时 - 它会恢复到初始高度,并且只有在我专注于 textarea 并按 Enter 时才会自动扩展,这意味着它会裁剪掉很多内容(特别是在涉及多行项目的情况下)。
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?
有没有一种方法可以确定容器的滚动高度,就好像用户在 mount 上键入了一些东西以将 textarea 扩展到相同的高度?
Edit: Apologies for the confusion, the issue comes when I recall the same text that was entered from a database into the same textfield编辑:为混乱道歉,当我回忆起从数据库输入到同一个文本字段中的相同文本时,问题就出现了
(added photos to demonstrate my issue) (添加照片以证明我的问题)
Added photos: Text when added in textarea添加的照片:在 textarea 中添加时的文本
Same text on load/mount加载/安装上的相同文本
(on the second image, you can see that the text area has gone back to it's original height after the text has been saved to a database and injected back into the same textarea) (在第二张图片中,您可以看到在将文本保存到数据库并注入回同一文本区域后,文本区域已恢复到原来的高度)
$("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>
This should work:这应该有效:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.