textarea高度跟随文字高度而变化

最新推荐文章于 2020-02-17 18:32:47 发布

summer_my_sunshine

最新推荐文章于 2020-02-17 18:32:47 发布

阅读量1.2k

点赞数

文章标签： h5 js

本文链接：https://blog.csdn.net/summer_my_sunshine/article/details/79196044

版权

这篇博客介绍了一种方法，通过JavaScript实现textarea元素的高度根据其内部文字的高度自动调整。HTML部分展示了带有id为'textarea'的textarea元素，而JavaScript部分定义了一个名为'makeExpandingArea'的函数，该函数监听textarea的输入事件，实时更新textarea的高度为scrollHeight属性的值，确保高度始终匹配文字内容的高度。此外，函数还处理了回退、删除和复制粘贴操作，确保这些操作后的textarea高度也能正确更新。

摘要由CSDN通过智能技术生成

html部分：

<textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea>

js部分：

<script>
function makeExpandingArea(el) {
var setStyle = function(el) {
el.style.height = 'auto';
el.style.height = el.scroll