textarea高度自适应必须用JavaScript三步法：先设style.height='auto'，再读scrollHeight，最后赋值；CSS需配合min-height、max-height、overflow-y:auto和box-sizing:border-box。
直接给 textarea 设 height: auto 不起作用——它不会随内容自动重算高度。必须用 JavaScript 主动读取真实内容所需高度，并每次输入后同步设置。
核心三步法（必做）
这是防止高度“越撑越高”或“删字不缩”的关键逻辑：
- 先清除内联高度：
this.style.height = 'auto' - 再读取真实内容高度：
this.scrollHeight（含 padding，不含 border/外边距） - 最后赋值：
this.style.height = this.scrollHeight + 'px'
CSS 必须配合的四条规则
仅靠 JS 不够，样式缺失会导致初始不可点、无限拉伸或视觉错位：
-
min-height: 60px—— 保证空状态可点击、有基础高度 -
max-height: 240px—— 超出时才出现滚动条，避免页面被顶飞 -
overflow-y: auto—— 内容溢出时显示滚动条，不裁切文字 -
box-sizing: border-box—— 让 padding 和 border 包含在 height 内，尺寸计算更可控
兼容性增强处理
不同浏览器对 scrollHeight 的响应时机不同，需针对性优化：
-
Safari（尤其是 iOS）：加
requestAnimationFrame确保渲染就绪textarea.addEventListener('input', () => { requestAnimationFrame(() => { /* 三步法 */ }); }); -
IE11：
\r\n换行符会导致高度偏小约 2px，可简单补偿：const finalHeight = textarea.scrollHeight + (isIE11 ? 2 : 0) -
监听事件选
input，不是keyup：只有input能捕获粘贴、拖入、剪切、自动补全等全部输入行为
替代方案：contenteditable div（无 JS 也能实现）
如果项目允许放弃原生 textarea 行为，可用 div[contenteditable] 模拟：
- 天然自适应高度，无需 JS 监听
- 需加样式：
min-height: 60px; max-height: 240px; overflow-y: auto; outline: none; - 限制富文本输入（如只允许纯文本）可加：
-webkit-user-modify: read-write-plaintext-only（Chrome/Safari 支持）
