h5如何实现textarea根据输入内容自适应高度

最新推荐文章于 2024-10-14 09:59:18 发布

慕容屠苏

最新推荐文章于 2024-10-14 09:59:18 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端爬坑之路 web移动端

本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/84840196

大前端爬坑之路同时被 2 个专栏收录

188 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

web移动端

67 篇文章

订阅专栏

在webApp开发中，实现textarea根据输入内容自动调整高度是一个常见需求。通过在底部设置固定位置的div，并监听textarea的输入事件，当textarea内容换行时，动态修改textarea及div的高度，从而达到高度自适应的效果。具体实现代码包括HTML结构和JavaScript事件处理。

h5如何实现textarea根据输入内容自适应高度

webApp的开发经常会在有评论的功能，textarea会随内容的增加自动增加元素的高度。

实现效果如图：

：

1.在底部设置fix的附件元素div，包含评论textarea

2.为textarea设置内容变化事件，当textarea换行时更改textarea高度，当textarea的高度增加时，附件元素 div的高度也随着增加。

实现代码：

html:

<div  style="width: 100%;height: auto;background: #dddddd;position: fixed;bottom: 0;">

					<div style="width: 100%;position: relative;height: auto;">					
						<textarea id="leaveAMsg" placeholder="请输入留言"></textarea>
					</div>
					<img src="../../i

了解本专栏