使用CSS动态调整字段高度：如何实现textarea自适应内容行数

以下是两种可直接落地的实现方案，均满足无滚动条、动态适配内容行数的需求：

方案1：纯CSS实现（现代浏览器最优解） #

仅需新增CSS属性即可实现，无需编写JS逻辑，适配Chrome 123+、Firefox 122+、Safari 17.4+及以上版本浏览器：

textarea {
  /* 核心属性：自动根据内容调整控件尺寸 */
  field-sizing: content;
  /* 最小高度适配单行展示 */
  min-height: 32px;
  /* 隐藏滚动条 */
  overflow: hidden;
  /* 可选：禁止用户手动拖拽调整大小 */
  resize: none;
  /* 以下为自定义样式可根据需求修改 */
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  line-height: 1.5;
}

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

如果需要兼容更低版本浏览器，可通过原生JS实现，逻辑如下：

HTML 代码 #

<textarea id="autoTextarea" rows="1"></textarea>

CSS 代码 #

#autoTextarea {
  overflow: hidden;
  resize: none;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  line-height: 1.5;
}

JS 代码 #

const textarea = document.getElementById('autoTextarea')
// 初始化高度适配默认内容
textarea.style.height = textarea.scrollHeight + 'px'

// 监听输入事件动态调整高度
textarea.addEventListener('input', function() {
  // 先重置高度为auto，保证内容减少时高度可自动回缩
  this.style.height = 'auto'
  this.style.height = this.scrollHeight + 'px'
})

注意事项 #

• 该方案支持输入、粘贴、换行、删除内容等所有场景，高度会自动适配内容变化
• 建议固定行高数值，避免不同字体样式导致的高度计算偏差

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