Bootstrap的textarea默认不自适应高度，需用JavaScript监听input事件并设style.height为scrollHeight，同时设置min-height和max-height防异常拉伸，初始须调用调整函数。
Bootstrap 的 textarea 默认不会随内容自适应高度，直接设 height: auto 无效；必须用 JavaScript 监听输入并手动同步 scrollHeight，同时配合 CSS 限制边界，否则容易撑爆布局或滚动条消失后内容不可见。
为什么直接写 height: auto 不起作用
textarea 是替换元素（replaced element），它的尺寸行为和普通块级元素不同：CSS 的 height: auto 对它不生效，浏览器不会根据内容自动重排高度。Bootstrap 的 .form-control 类只设了 min-height 和 padding，但没提供动态伸缩逻辑。
常见错误现象：
- 只加
style="height: auto"，结果高度卡死在初始rows值上 - 用
clientHeight或offsetHeight替代scrollHeight，导致高度始终偏小（它们不含溢出内容） - 没初始化调用一次调整函数，首屏渲染时高度不准，尤其在模态框（
.modal）中更明显
用 input 事件 + scrollHeight 同步高度（推荐方案）
核心是每次输入后把 textarea.style.height 设为 scrollHeight，再清一次 height: auto 触发重算。注意要加缓冲、限高、节流。
- 先执行
$ta.style.height = 'auto'，再赋值$ta.scrollHeight + 'px'，否则某些浏览器（如 Safari）可能读到旧值 - 必须设置
min-height（如min-height: 80px）防止空内容时过矮 - 必须设置
max-height（如max-height: 200px），否则长文本会把父容器顶开，尤其在.modal-body或.card-body中 - 监听
input而非keyup：覆盖粘贴（paste）、剪切（cut）、拖入文本、语音输入等所有变更场景 - 在 Bootstrap 5+ 中，
.form-control已含box-sizing: border-box，所以无需手动减去 padding/border
const $ta = document.querySelector('textarea');
const adjustHeight = () => {
$ta.style.height = 'auto';
$ta.style.height = $ta.scrollHeight + 'px';
};
$ta.addEventListener('input', adjustHeight);
adjustHeight(); // 初始化
在 Bootstrap 模态框（Modal）里高度异常怎么办
模态框内 textarea 自适应失败，多数不是 JS 问题，而是父容器裁剪或滚动逻辑冲突。
-
.modal-body默认无max-height，内容超长时整个.modal会被拉高，导致页面出现全局滚动条——此时textarea看似“没变高”，其实是被父层截断了 - 确保
.modal-body有max-height: calc(100vh - 180px)和overflow-y: auto，并加-webkit-overflow-scrolling: touch防 iOS 卡顿 - 复用模态框时（如编辑表格行），务必在
show.bs.modal事件中清空textarea.value并再次调用adjustHeight()，否则残留值会让初始高度计算错误 - 如果
textarea在.form-floating内，需额外给.form-floating > .form-control加min-height: 3.5rem，否则上浮的label会遮挡顶部内容
想加平滑过渡效果但 height: auto 不能 transition 怎么办
直接对 height 加 transition 无效，因为 height: auto 无法插值。只能退而模拟，用 max-height 过渡。
- 设
max-height: 100px（按业务预期最大高度定），再加transition: max-height 0.2s ease-out - JS 中不再操作
height，改为动态设置max-height：先设'none'强制重排，再设目标值（如$ta.scrollHeight + 'px'） - 注意：过度大的
max-height（如1000px）会导致动画时间失真，建议按实际场景分档（如短文本 ≤ 120px，长说明 ≤ 240px） - 该方案在 Safari 上兼容性更好，且不影响
form-floating的 label 动画
真正难的不是让高度变，而是让高度「稳」：稳在容器内、稳在用户预期里、稳在复用场景下不漂移。别忽略 min-height、max-height 和初始化调用这三个点，90% 的现场问题都出在这儿。
