textarea的rows属性仅控制初始高度，无法动态撑高；真正可靠的方法是监听input事件，通过设置style.height='auto'后读取scrollHeight赋值，并配合box-sizing:border-box及min/max-height。
textarea 的 rows 属性根本不会动态撑高
它只是个初始行数提示，不是响应式高度控制器。你输 100 行字，rows="4" 的 textarea 也不会自动变高——浏览器不会根据内容重算 rows 值，它只在首次渲染时按默认字体和行高粗略估算一个初始高度，之后就不管了。
为什么直接改 textarea.rows 不起作用
JS 执行 el.rows = 8 确实会触发一次重排，但只影响“初始渲染高度”，不感知当前内容长度；更关键的是：一旦你用 CSS 写了 height、min-height 或 max-height，这个赋值就会被完全忽略。常见翻车现场：
- 表单验证失败后只改
rows，但没清空之前设的style.height，结果高度卡死 - React/Vue 中把
rows当响应式 prop 绑定，每次 re-render 都触发无意义重排，光标位置丢失 - 用户手动拖拽调整过大小，再 JS 改
rows，拖拽状态被覆盖，体验断裂
真正能动态撑高的唯一可靠路径
必须用 JS 监听 input（含粘贴、删除、回车），先临时设 style.height = 'auto'，再读 scrollHeight 赋值，且每次都要清掉旧的 style.height 防累积：
const ta = document.querySelector('textarea');
ta.addEventListener('input', () => {
ta.style.height = 'auto';
ta.style.height = ta.scrollHeight + 'px';
});
注意三点：
立即学习“前端免费学习笔记（深入）”；
- 必须加
box-sizing: border-box，否则 padding 会让scrollHeight多算 - 要配
min-height和max-height，不然空内容时塌成一条线，或疯狂拉伸失控 - 移动端 iOS Safari 对
scrollHeight有延迟，可加setTimeout(() => { ... }, 0)微调
CSS 的 height: auto 为什么单独写无效
因为 textarea 是替换元素（replaced element），它的尺寸计算规则和普通块元素不同：height: auto 在它身上不触发内容高度测量，只按 rows 或内联 height 计算。你写 style="height: auto;" 看起来没报错，但实际啥也没发生——必须配合 JS 强制读取 scrollHeight 才能突破这个限制。
