textarea自适应高度必须监听input事件，因其覆盖粘贴、IME输入等所有输入场景；需配合style.height='auto'与scrollHeight读取，并用setTimeout或requestAnimationFrame优化；CSS须设resize:none、overflow:auto、min/max-height及box-sizing:border-box；验证状态和placeholder需同步处理；框架中应通过ref和生命周期管理监听。
textarea 自适应高度必须监听 input 事件，不是 keyup 或 resize
原生 textarea 不会随内容自动撑高，height: auto 在 CSS 中对它完全无效。只监听 keyup 会漏掉粘贴、拖入文本、IME 输入（如中文拼音上屏）、右键粘贴等操作；resize 事件只响应用户手动拖拽边框，跟内容无关。
正确做法是绑定 input 事件——它覆盖所有输入来源，包括剪贴板、语音、自动填充和输入法提交。
- 每次触发前先设
textarea.style.height = 'auto'，再读scrollHeight，否则旧高度会累积导致越撑越高 - 移动端（尤其是 iOS Safari）在软键盘弹出后可能读到错误的
scrollHeight，加setTimeout(() => { /* 读 scrollHeight */ }, 0)延迟一帧可缓解 - 若用户连续粘贴大段文本，
input可能高频触发，建议用requestAnimationFrame节流，避免界面卡顿
textarea 的 CSS 必须禁用 resize 和限制 overflow
如果 textarea 允许拖拽（resize: both）或设置了 overflow: hidden，scrollHeight 就会失真：前者让浏览器误判内容尺寸，后者直接截断内容却不触发滚动，导致计算值偏小、高度塌陷。
正确 CSS 样式应包含：
立即学习“前端免费学习笔记（深入）”；
-
resize: none—— 关闭手动缩放，避免干扰 JS 计算 -
overflow: auto—— 允许内容溢出时出现滚动条，但仅当超过max-height时才显示 -
min-height和max-height—— 前者防空值塌陷（如min-height: 80px），后者是安全阀（如max-height: 240px），没它长文本会撑爆布局 -
box-sizing: border-box—— 确保内边距和边框不额外增加高度
表单验证状态（:invalid）会让自适应高度错位
当 textarea 触发 HTML5 验证失败（比如 required 未填），浏览器插入伪元素或调整盒模型，可能导致 scrollHeight 多算 1–2 行空白。现象是光标下方突然多出空行，或高度抖动。
应对方式很具体：
- 同时监听
input和invalid（以及valid）事件，在状态变化后主动调用一次重设高度逻辑 - 避免在
:invalid选择器里修改padding、line-height或font-size，这些都会影响scrollHeight计算 - 若用了
placeholder，确保其字体大小与textarea一致，否则空值时高度偏差明显
Vue/React 项目里别直接操作 DOM，用 ref + 生命周期钩子
在框架中硬写 document.querySelector('textarea').addEventListener(...) 容易造成内存泄漏（组件卸载后监听未清除）或更新不同步（state 改变但 DOM 未及时响应）。
应该走框架约定路径：
- Vue：用
ref绑定元素，配合onMounted/onBeforeUnmount添加/移除监听；若用 Element Plus 的el-textarea，优先启用内置autosize并设minRows="1" maxRows="6" - React：用
useRef+useEffect，清理函数里调用removeEventListener - 绝对不要用
contenteditable+v-model或useState模拟 —— 输入法下中文重复、光标乱跳、回车失灵是通病，不是 bug，是框架重写 DOM 与浏览器编辑状态的根本冲突
真正难的不是“怎么让框变高”，而是高度变化时保持光标位置稳定、不打断输入法流程、不被软键盘遮挡、不因验证样式抖动——这些细节不报错，但用户打字中途失焦一次，信任就掉一截。
