FireFox中textarea动态高度无法适配内容的问题求助

Firefox对textarea的scrollHeight计算逻辑和Chrome存在差异，直接设置高度为scrollHeight无法触发更新，需要先重置高度再重新计算。以下是可行的解决方案：

核心思路 #

先将textarea的高度重置为auto，让Firefox重新计算内容的真实滚动高度，再将高度设置为scrollHeight，确保高度完全匹配内容。

代码实现 #

1. CSS 基础样式 #

先设置基础样式，保证布局一致性：

textarea {
  resize: none;
  overflow: hidden;
  box-sizing: border-box; /* 让padding和border包含在高度计算内 */
  min-height: 40px; /* 避免内容为空时高度过矮 */
  padding: 8px; /* 可选，根据需求调整内边距 */
}

2. JavaScript 自适应逻辑 #

编写高度调整函数，并绑定到合适的事件上：

function adjustTextareaHeight(textarea) {
  // 重置高度为auto，触发Firefox重新计算scrollHeight
  textarea.style.height = 'auto';
  // 设置高度为内容的滚动高度
  textarea.style.height = textarea.scrollHeight + 'px';
}

// 获取目标textarea元素
const dynamicTextarea = document.getElementById('dynamicTextarea');

// 页面加载时初始化高度
adjustTextareaHeight(dynamicTextarea);

// 监听输入事件，实时调整高度
dynamicTextarea.addEventListener('input', () => {
  adjustTextareaHeight(dynamicTextarea);
});

// 可选：监听窗口 resize，处理textarea宽度变化导致的换行
window.addEventListener('resize', () => {
  adjustTextareaHeight(dynamicTextarea);
});

3. HTML 结构 #

<textarea id="dynamicTextarea" placeholder="输入内容试试..."></textarea>

为什么Firefox需要重置高度？ #

Chrome会在内容变化后自动更新scrollHeight的值，直接设置高度即可生效。但Firefox中，若textarea高度为固定值，scrollHeight不会自动同步内容变化后的真实高度，必须先将高度重置为auto，让浏览器重新计算内容区域的高度，才能得到准确的scrollHeight。

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