textarea不能自动撑高，因其默认为固定尺寸控件，rows/cols仅影响初始渲染，height: auto无效；必须用js监听input事件，先设height='auto'再赋scrollheight，并配合overflow-y: hidden、防抖及样式一致性控制。
textarea 为什么不能自动撑高？
因为 textarea 默认是「固定尺寸」控件，rows 和 cols 只影响初始渲染，不响应内容增长；CSS 的 height: auto 对它完全无效——这是和 div[contenteditable] 最根本的区别。浏览器不会根据换行符或文字数量自动调整高度，必须靠 JS 主动干预。
用 scrollHeight 实现基础自适应
核心思路：监听 input 事件，把 textarea 的 scrollHeight 赋给 style.height，再加一点 padding 补偿（否则会抖动）。
-
scrollHeight是内容实际所需高度（含隐藏部分），比offsetHeight或clientHeight更可靠 - 必须在设置前清空
style.height，否则内联 height 会覆盖后续计算 - 要防抖：连续输入时频繁设 height 会导致卡顿，建议用
requestAnimationFrame聚合更新 - CSS 中需关闭垂直滚动条：
overflow-y: hidden，否则滚动条出现又消失会闪动
const el = document.querySelector('textarea');
el.addEventListener('input', () => {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
});
为什么 autosize.js 还是更推荐？
手写 scrollHeight 方案在以下场景容易出错：
- 用户粘贴大段带格式文本（含不可见 Unicode 字符），
scrollHeight计算偏大 - 字体加载未完成时测量，导致高度跳变
- 缩放页面（
transform: scale）或使用 rem/em 单位时，像素值失准 - iOS Safari 下
scrollHeight偶尔返回 0（需 setTimeout 延迟读取）
像 autosize 这类库已封装了这些边界 case，还支持 minRows/maxRows 限制、动态 resize 监听、以及与 Vue/React 的集成钩子。真要自己实现，至少得补上 resize 事件监听和字体就绪检测。
别忽略的样式细节
自适应高度生效的前提，是 CSS 不干扰原始行为：
- 移除
height和max-height内联或全局样式（尤其框架重置 CSS 常偷偷加max-height: 200px） -
line-height必须是数值（如1.5），不能是normal或unset，否则scrollHeight测量不准 - 如果用了
box-sizing: border-box，记得把padding和border宽度从scrollHeight中减掉，或统一用box-sizing: content-box -
resize: none不影响自适应逻辑，但建议加上，避免用户手动拖拽破坏自动高度
真正难的不是让高度变长，而是让每次变化都稳定、无闪动、不误判——这些细节往往在测试阶段才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
