如何用纯JavaScript调整动态创建的textarea高度以适配内容？

要让你动态创建的textarea恰好完整显示所有内容，核心思路是利用textarea的scrollHeight属性——它会返回元素内容实际需要的总滚动高度，我们可以把这个值设置为textarea的高度。不过有几个细节要处理，避免出现滚动条或者高度计算不准的情况：

这里是完整的实现代码：

let field = document.createElement('textarea');
field.value = "Long text received from database";
field.style.width = "650px";

// 先重置高度为auto，确保scrollHeight能准确计算当前内容的实际高度
field.style.height = "auto";
// 将高度设置为scrollHeight，让textarea刚好容纳所有内容
field.style.height = field.scrollHeight + "px";

// 可选：如果后续内容会被修改，添加input监听实时调整高度
field.addEventListener('input', function() {
  this.style.height = "auto";
  this.style.height = this.scrollHeight + "px";
});

// 最后把textarea添加到页面中
document.body.appendChild(field);

关键步骤解释： #

1. 重置高度为auto：这一步必不可少，如果textarea有默认高度，scrollHeight可能无法准确反映当前内容的实际需求。先把高度设为auto，让元素根据内容计算出自然的滚动高度。
2. 用scrollHeight设置最终高度：scrollHeight包含了内容的总高度（包括原本会被隐藏的部分），把它赋值给元素的高度，就能让textarea刚好放下所有内容，不会出现滚动条。
3. 可选的实时监听：如果后续用户会修改textarea里的内容，添加input事件监听可以让高度实时适配新内容，保持界面的流畅性。

要是遇到个别浏览器因为边框、内边距导致高度略有偏差的情况，可以用getComputedStyle获取元素的padding和border值，微调最终高度：

const computedStyle = window.getComputedStyle(field);
const paddingTop = parseInt(computedStyle.paddingTop);
const paddingBottom = parseInt(computedStyle.paddingBottom);
const borderTop = parseInt(computedStyle.borderTopWidth);
const borderBottom = parseInt(computedStyle.borderBottomWidth);

field.style.height = (field.scrollHeight - paddingTop - paddingBottom - borderTop - borderBottom) + "px";

不过大多数场景下，直接使用scrollHeight就能满足需求，不需要额外调整。

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