HTML怎么做textarea自动高度_HTML textarea自适应内容高度全网最全

必须先设 height: auto 再读 scrollHeight，否则旧高度会干扰测量；iOS、IE11 等环境下易导致高度卡顿、留白或光标跳动。

直接用 scrollHeight 动态设 style.height 就行，但必须先清空旧高度再读值，否则 iOS、IE11、狂敲键盘时都会出错。

为什么不能只写 this.style.height = this.scrollHeight + 'px'

因为 scrollHeight 是“当前样式下内容撑开所需的高度”，如果之前手动设过固定 height（比如上一次输入留下的 200px），浏览器会把它当约束条件，导致 scrollHeight 计算偏小——尤其在 iOS Safari 和 IE11 上更明显。

• 每次触发前必须加 this.style.height = 'auto'，让元素回归自然流式计算逻辑
• 不加这句，删文字时高度卡住不缩、粘贴大段后底部留白、回车换行光标跳动都是常见表现
• 某些老项目用 rows 控制高度，那完全无效：rows 只是提示行数，受字体、缩放、padding 影响极大，不是真实像素高度

input 事件监听够不够？要不要防抖？

够用，但得配合 requestAnimationFrame 或至少 setTimeout(..., 0)，尤其在高刷屏或 iOS 上。纯防抖（如 300ms）反而会让用户感知到延迟，比如快速输入时最后一行突然“弹下来”。

• 推荐写法：textarea.addEventListener('input', () => { requestAnimationFrame(() => { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; }); });
• 不用 debounce，除非你发现页面其他逻辑严重拖慢主线程；高频 input 本身不卡，卡的是反复改 style.height 触发重排
• 移动端要特别注意：iOS Safari 对 scrollHeight 的更新有微小延迟，requestAnimationFrame 能等它真正就绪

IE11 和换行符的兼容性怎么修？

IE11 把 rn 当一个字符算，而现代浏览器统一按 n 处理，导致空行末尾的 scrollHeight 偏小 1 行。不换行符格式就修不了，但可以绕过去。

立即学习“前端免费学习笔记（深入）”；

• 如果后端不要求保留原始换行，加一行 textarea.value = textarea.value.replace(/rn/g, 'n'); 再算高度
• 如果必须保留 rn（比如日志类场景），就对 IE11 单独补偿：const height = textarea.scrollHeight + (isIE11 ? 2 : 0);
• 顺手加上 textarea { resize: none; overflow: hidden; }，避免用户拖拽破坏自适应逻辑

最易被忽略的一点：没设 min-height 和 max-height。空 textarea 默认可能只有 1 行高，用户体验差；不限制上限，用户粘贴万字文档会把页面顶飞。这两项必须用 CSS 控制，别指望 JS 算。