自动适配内容高度的原理与实现 " />

该代码通过先重置再重设 `style.height`，强制触发浏览器重新计算 `` 的 `scrollheight`，从而实现内容增长时自动撑开、无空白或截断的自适应高度效果。

在 Web 开发中，让 根据输入内容自动调整高度是一个常见需求。但原生 <textarea> 不具备自动伸缩能力，需借助 JavaScript 手动控制其 style.height。你看到的这段代码正是实现该功能的关键技巧：

<textarea oninput="{(event)"> {
    event.target.style.height = '5px'; // ① 临时重置为极小高度
    event.target.style.height = event.target.scrollHeight + 'px'; // ② 重设为真实内容所需高度
  }}
/></textarea>

为什么需要两步赋值？

关键在于 浏览器渲染机制：scrollHeight 返回的是元素内容的完整高度（包括溢出部分），但它依赖于当前样式（尤其是 height 和 overflow）来准确计算。如果 当前 height 是 auto 或一个固定较大值，scrollHeight 可能被缓存或受旧布局影响，导致返回值偏大（例如包含未换行的长文本产生的“假高度”）。

第一步 event.target.style.height = '5px' 的作用是：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

• 强制将元素高度压缩到极小值；
• 触发浏览器同步重排（reflow），清空旧布局缓存；
• 确保后续读取 scrollHeight 时，DOM 基于最新、最紧凑的尺寸重新测量内容真实高度。

第二步 event.target.style.height = event.target.scrollHeight + 'px' 则将高度精确设置为内容实际所需高度，实现无缝拉伸。

✅ 正确效果：输入换行或粘贴多行文本 → 高度平滑增加 → 无滚动条、无空白、无截断 ❌ 若注释掉第一行：scrollHeight 可能复用旧高度（尤其在快速输入时），导致高度增长滞后或卡顿，甚至出现滚动条闪烁。

补充说明与最佳实践

• offsetHeight 始终返回渲染后的可视高度（含 padding/border），它不会随 scrollHeight 变化而立即更新——这是你 console.log(event.target.offsetHeight) 值不变的原因；真正驱动变化的是 style.height。
• 推荐添加 overflow: hidden 到 样式中，避免在高度重设瞬间出现滚动条闪现：<pre class="brush:php;toolbar:false;">textarea { overflow: hidden; resize: none; /* 禁用手动拖拽，保持体验一致 */ min-height: 24px; /* 防止过小 */ }</pre>
• 生产环境建议加入防抖或最小高度保护，避免极端情况（如全空格输入）导致高度塌陷：

  const minHeight = 24;
  event.target.style.height = '5px';
  event.target.style.height = Math.max(minHeight, event.target.scrollHeight) + 'px';

掌握这一“重置—重测—重设”模式，不仅能用于 ，还可迁移到其他需要动态响应内容尺寸的场景（如 <pre class="brush:php;toolbar:false;">、自定义折叠面板等）。核心思想始终如一：<strong>主动干预渲染流程，确保 DOM 测量基于最新、最干净的布局状态。</strong></pre>