textarea.style.height = 'auto' 必须在读取 scrollheight 前执行，否则旧高度会干扰计算，导致越撑越高、删空不缩回、ios 光标跳动；正确顺序为：重置高度→触发重排→读 scrollheight→赋值。
textarea.style.height = 'auto' 必须放在 scrollHeight 读取之前
不加这句，高度会越撑越高、删文字不缩回、iOS 上光标跳动——所有这些表现都指向同一个问题：旧的内联 height 值还在起作用，浏览器把它当硬约束，导致 scrollHeight 计算失真。
正确顺序只有一条铁律：textarea.style.height = 'auto' → 触发重排 → 再读 scrollHeight → 赋值给 style.height。跳过第一步，后续全白搭。
- IE11 和 iOS Safari 对这一步更敏感，不重置就容易卡在某个固定高度
- 哪怕只是粘贴一段带换行的文本，没重置也会多出 1–2 行空白
- React/Vue 中如果用 ref 操作 DOM，也得确保每次更新前先清空 height
scrollHeight 是唯一靠谱的高度来源，别碰 offsetHeight 或 clientHeight
scrollHeight 是内容实际所需总高度（含 padding，不含 border 和 margin），它能告诉你“填满所有文字最少要多高”。offsetHeight 和 clientHeight 都是可视区高度，永远比内容真实高度小，一用就撑不开。
- 如果 textarea 有
padding: 12px，scrollHeight已包含这 24px，不用额外加减 - 设了
border: 1px solid #ccc？不影响scrollHeight，但建议统一用box-sizing: border-box，避免视觉错位 - 字体加载未完成时读
scrollHeight可能偏小，可监听document.fonts.load()或加requestAnimationFrame延迟读取
min-height 和 max-height 必须走 CSS，JS 不负责上下限
JS 只管“当前内容需要多高”，但空 textarea 该有多矮、狂输 500 行该有多高，必须靠 CSS 的 min-height 和 max-height 控制。光靠 JS 算，空值时可能塌成一条线，超长时直接撑爆页面。
- CSS 中必须显式写
min-height: 80px（或你设计稿要求的值），否则初始点击无响应区域 -
max-height: 300px+overflow-y: auto组合，才能实现“撑到上限后出现滚动条” - 别用
height: 100%或flex: 1直接套在 textarea 上——它会和 JS 设置的style.height冲突 - 移动端软键盘弹起时视口变化，可加
window.addEventListener('resize', …)并节流兜底
换行符和浏览器差异必须主动处理
Windows 的 \r\n、旧版 IE 的换行计数偏差、iOS Safari 的 scrollHeight 延迟……这些不是边缘 case，而是上线必踩的坑。
- 若后端不要求保留原始换行符，输入前先做
textarea.value = textarea.value.replace(/\r\n/g, '\n') - 日志类场景必须保留
\r\n？那就对 IE11 单独补偿：const height = textarea.scrollHeight + (isIE11 ? 2 : 0) - iOS Safari 下推荐用
requestAnimationFrame包一层读取，比setTimeout(, 0)更稳，尤其在高刷屏上 - 用户粘贴富文本（含不可见 Unicode 字符）时，
scrollHeight容易偏大，autosize.js 这类库内部做了字符过滤，手写需自行截断或限制长度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
