当为 动态设置 height 后，若未重置其计算基准，scrollHeight 会累积已设置的高度（如额外 padding），导致每次输入都错误放大。正确做法是在读取 scrollHeight 前将 style.height 设为 "auto"，确保浏览器基于纯内容重新计算。
当为 `
在实现自适应高度的
关键问题在于：scrollHeight 并非仅由文本行数决定，它依赖于当前布局上下文。当你执行 textarea.style.height = textarea.scrollHeight + 100 + 'px' 后，下一次触发 resizeTextarea() 时，textarea.scrollHeight 实际上是「在当前已设高度（含 100px 额外高度）的容器中，内容所占的滚动高度」，这会导致数值持续虚高、指数级膨胀。
✅ 正确解法：在每次读取 scrollHeight 前，先临时清除内联高度限制，让元素回归 height: auto 的自然流式行为。此时 scrollHeight 才真正反映最小内容所需高度（不含人为添加的冗余空间）。
以下是优化后的标准实现：
function resizeTextarea() {
const textarea = document.getElementById('textarea');
// ? 关键步骤：重置为 auto，解除高度锁定，使 scrollHeight 基于真实内容计算
textarea.style.height = 'auto';
// 此时 scrollHeight 准确表示内容最小高度（含默认 padding 和 line-height）
const contentHeight = textarea.scrollHeight;
// 添加期望的额外垂直空间（如 100px 总 padding，或上下各 50px）
textarea.style.height = (contentHeight + 100) + 'px';
}
// 绑定事件（推荐使用 'input' 而非 'keyup'，覆盖粘贴、删除等所有内容变更）
document.getElementById('textarea').addEventListener('input', resizeTextarea);
// 初始调用，确保加载后即适配
resizeTextarea();⚠️ 注意事项：
- 避免使用 onkeyup 或 onkeydown：它们无法捕获鼠标粘贴、拖放、右键粘贴或程序化赋值（如 value = ...）等场景；input 事件才是语义正确且全覆盖的选择。
- 慎用 box-sizing: border-box 的干扰：若
- 性能提示：高频输入下可考虑防抖（debounce），但对多数表单场景，input 事件+同步重置开销极低，无需过度优化。
- 无障碍补充：动态调整高度时，建议同时设置 aria-live="polite"，便于屏幕阅读器感知变化。
总结：scrollHeight 的“失真”并非 bug，而是 CSS 盒模型与 JavaScript 布局查询协同作用的必然结果。掌握“先 height: auto 再测量”的范式，即可稳定实现精准、可预测的自适应文本域高度控制。
