用 textarea 实现聊天输入框自适应高度需 js 与 css 协同：监听 input 和 paste 事件，先设 height: auto 再赋 scrollheight；配合 min-height、max-height、overflow-y: auto 等样式，并统一 box-sizing、font-size、line-height，兼容 ios 和 ie11。
直接用 textarea 实现聊天输入框的自适应高度，核心是让它的视觉高度随文字行数动态变化，同时隐藏滚动条、防止过度拉伸，并兼容各种输入行为（打字、粘贴、回车、删除）。这不是加个 CSS 就能搞定的事，必须靠 JS 配合关键样式控制。
监听 input 和 paste 事件，每次重置再读高度
只监听 input 会漏掉粘贴内容；不先设 height: auto 就读 scrollHeight，iOS 和 IE11 会算错，导致越输越高或删字不缩高。
- 给
textarea绑定input和paste两个事件 - 在事件回调里，第一句必须是
textarea.style.height = 'auto' - 紧接着再赋值
textarea.style.height = textarea.scrollHeight + 'px' -
paste后建议包一层setTimeout(() => { ... }, 0)或更稳的requestAnimationFrame，确保 DOM 渲染完成后再读高度
必须设置 min-height 和 max-height 的 CSS
光靠 JS 算高度不行。没有 min-height，空文本域会塌成一条线，点都点不到；没有 max-height，用户狂输时页面会被撑爆。
- CSS 中写死
min-height: 40px（保证初始有可点击区域） - 写死
max-height: 200px（超出后才出现滚动条） - 加上
overflow-y: auto，否则超限时内容被裁切 - 禁用拖拽：
resize: none；隐藏默认滚动条：overflow: hidden
样式细节必须和 JS 计算一致
scrollHeight 是真实渲染高度，受字体、行高、内边距、边框影响。JS 算出来的值，必须和浏览器实际画出来的完全对得上。
- 统一用
box-sizing: border-box，避免 padding 和 border 额外加高 - 设置明确的
font-size和line-height，别依赖浏览器默认值 - 移动端注意：iOS Safari 对
scrollHeight更新有微小延迟，requestAnimationFrame比setTimeout更可靠 - IE11 把
\r\n当一个字符，现代浏览器按\n处理，可做归一化：textarea.value = textarea.value.replace(/\r\n/g, '\n')
别用 input，也别硬套 fit-content
input[type="text"] 是单行替换元素，天生不支持换行，scrollHeight 永远不变，强行套 textarea 的逻辑毫无意义。CSS 的 height: fit-content 对 textarea 完全无效，它不是普通块级元素。
- 需要多行+自适应，就老实用
textarea - 若追求富文本或特殊交互，可用
contenteditable="plaintext-only"的div，但会引入光标定位、移动端软键盘遮挡、选区管理等新问题 - 聊天场景下，
textarea更轻量、语义正确、可访问性好，是更稳妥的选择
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
