textarea输入框根据输入字符数量自动拉大高并换行（ChatGPT输入框效果）
- 效果图
- 原理
- 源码
- HTML
- CSS
- JS
效果图
原理
通过js的输入事件实时的监视文本框，让文本框的高始终等于文本框滚动的高度（由于文本框高固定之后输入过多的字符后会出现滚动条）
源码
注：这里是用的原生js，如果是vue框架的话，请自行转换一下
HTML
<textarea id="inputTextarea" rows="1" ></textarea>CSS
textarea {
width: 120px;
resize: none; /* 禁止用户调整文本框的大小 */
overflow-y: hidden; /* 隐藏竖直滚动条 */
}JS
var textarea = document.getElementById("inputTextarea");
textarea.oninput=function(e){
textarea.style.height ='auto';
textarea.style.height = textarea.scrollHeight + 'px';
}