textarea 的 rows="1" 仅设初始高度，无法自适应；需结合 CSS（min-height、overflow:hidden）与 JS（监听 input 事件、动态设置 height = scrollHeight）实现无滚动条的动态伸缩，注意重置 auto 高度、处理边界操作及移动端适配。
将 textarea 的 rows="1" 本身并不能实现真正的动态自适应高度，它只是把初始显示行数设为 1 行（约 1.2em 高度），内容超出后仍会滚动。要实现“输入内容越多、框越高，且始终只显示内容、不出现滚动条”的效果，需结合 CSS 与 JavaScript 才能达成。
用 CSS 实现基础自适应（无 JS，有限支持）
现代浏览器支持 resize: none + min-height + height: auto 配合 overflow: hidden，但 textarea 本身不响应 height: auto，所以纯 CSS 方案依赖 trick：
- 设置
textarea { min-height: 1.2em; height: auto; overflow: hidden; resize: none; } - 利用
scrollHeight模拟高度变化——但这一步必须靠 JS 触发，纯 CSS 无法读取内容高度 - 部分方案用
contenteditable div替代 textarea，可原生支持 auto-height，但失去表单原生校验、name 属性提交等能力
JS 动态同步 scrollHeight（推荐轻量方案）
监听 input 事件，将 textarea.scrollHeight 赋给 style.height，并限制最小/最大高度：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 初始化时设
rows="1"仅作语义提示，实际高度由 JS 控制 - 每次输入后执行：
el.style.height = "auto"; el.style.height = el.scrollHeight + "px"; - 加
min-height: 1.2em和max-height: 200px防止过高，配合overflow-y: auto作为兜底 - 注意：需在字体、padding、border 一致的前提下测试，否则 scrollHeight 偏差明显
避免常见坑点
很多看似“自动适配”的 textarea 实际体验卡顿或跳动，原因常出在：
立即学习“前端免费学习笔记（深入）”；
- 未重置
height为auto再赋值 —— 直接设scrollHeight会导致累积误差 - 没处理粘贴（
paste）、回车、删除等边界操作，建议统一绑定input事件（含所有修改场景） - 移动端软键盘弹起时，部分机型触发 resize 或 focus 后布局错乱，可加
el.offsetHeight强制重绘缓解 - 使用框架（如 Vue/React）时，避免在渲染周期中反复操作 DOM 高度，优先用 ref + useEffect / mounted
一个可用的最小化示例
不依赖库，直接写在页面里即可运行：
<textarea rows="1" style="min-height: 1.2em; max-height: 120px; overflow-y: auto; resize: none;"></textarea>
<script>
const ta = document.querySelector('textarea');
const syncHeight = () => {
ta.style.height = 'auto';
ta.style.height = Math.min(ta.scrollHeight, 120) + 'px';
};
ta.addEventListener('input', syncHeight);
syncHeight(); // 初始化一次
</script> 
