如何在Bootstrap中实现textarea行数随内容自适应扩展

实现textarea随内容自动撑开高度的两种方案 #

方案1：CSS原生实现（推荐，代码量最少） #

直接给目标textarea添加如下样式即可，不需要额外JS逻辑，支持高度随内容增减自动调整：

#exampleFormControlTextarea1 {
  /* 核心属性，让textarea高度自适应内容 */
  field-sizing: content;
  /* 保留默认3行的最小高度，适配Bootstrap输入框的内边距 */
  min-height: calc(3lh + 2 * var(--bs-input-padding-y));
  /* 可选：不需要拖拽调整尺寸可开启，也可保留原生拖拽功能 */
  resize: none;
}

方案2：JS实现（全浏览器兼容） #

如果需要兼容不支持field-sizing属性的旧版浏览器，用JS逻辑动态调整高度，同时适配打印场景：

const textarea = document.getElementById('exampleFormControlTextarea1');
// 监听输入事件动态调整高度
textarea.addEventListener('input', function() {
  // 先重置高度，保证内容减少时高度也会收缩
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});
// 页面加载时如果有默认内容，主动触发一次高度调整
window.addEventListener('load', () => {
  textarea.dispatchEvent(new Event('input'));
});
// 打印前主动调整高度，避免导出PDF时内容显示不全
window.addEventListener('beforeprint', () => {
  textarea.dispatchEvent(new Event('input'));
});

两种方案都可以保留textarea的原生表单提交能力，不会影响后续的打印、PDF导出功能，内容不会因为滚动条被截断。

内容的提问来源于stack exchange，提问作者Nisarg Kudgunti