textarea的自适应高度

Sunny_lm

于 2024-03-15 16:36:49 发布

阅读量3.5k

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_59787755/article/details/136742658

版权

本文介绍了两种方法来使textarea的高度随着输入内容自动增加：一是使用div模拟textarea的样式，二是通过监听textarea的input事件并计算滚动高度。这两种方法都展示了如何在前端开发中处理可编辑文本区域的动态高度问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：textarea的高度需要随着输入内容的增加而增加

方法一：div模拟textarea

<h3 class="tip">div模拟css实现textarea自适应高度 </h3>
<div class="test-textarea" contenteditable="true" >contenteditable控制用户对文本进行编辑</div>





       .tip{
            margin: 30px auto;
            text-align: center;
        }
        .test-textarea {
            width: 400px;
            margin-left: auto;
            margin-right: auto;
            padding: 3px;
            outline: 0;
            border: 1px solid #ccc;
            font-size: 12px;
            word-wrap: break-word;
          控制用户对页面文本进行编辑
            -webkit-user-modify: read-write-plaintext-only;
            border-radius: 4px;
        }

方法二：监听输入事件+窗口滚动高度

 <textarea id="text-adaption" class="text-adaption" rows="1"></textarea>
样式
	.text-adaption {
				width: 300px;
				height: 34px;
				overflow: hidden;
				padding: 5px 10px;
				resize: none;
				line-height: 24px;
				font-size: 12px;
				color: #666;
				border: 1px solid #ccc;
				outline: 0 none;
				border-radius: 3px;
				box-sizing: border-box;
  }
js代码
const el:any=document.getElementById("text-adaption")
el.addEventListener('input',function(){
  el.style.height = 'auto';
  el.style.height =  el.scrollHeight + "px";
})

参考