textarea的自适应高度

场景：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  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=("text-adaption")
('input',function(){
   = 'auto';
   =   + "px";
})

参考