获取 textarea 中文本的高度 - Javascript

在一些网页应用中，需要根据用户输入的文本来自适应调整 textarea 的高度。这就要求我们在 JS 中获取 textarea 中文本的高度。

以下是一种实现方法：

解释

首先，将 textarea 的文本内容放到一个临时的 div 元素中，同时将该 div 的宽度和字体大小设置成和 textarea 相同，但高度设为 auto，以便文本能够自动换行。然后获取该 div 的高度并返回即可。

代码片段

function getTextareaHeight(textareaElement) {
  const tempDiv = document.createElement("div");
  tempDiv.style.width = `${textareaElement.offsetWidth}px`;
  tempDiv.style.fontSize = getComputedStyle(textareaElement).fontSize;
  tempDiv.innerText = textareaElement.value;
  tempDiv.style.height = "auto";
  document.body.appendChild(tempDiv);
  const height = tempDiv.offsetHeight;
  document.body.removeChild(tempDiv);
  return height;
}

以上代码将返回 textarea 中文本的高度，可以直接在应用中使用。

注意事项

代码中的临时 div 元素必须在页面上是隐藏的，否则可能会对页面布局产生干扰。另外，如果文本中有换行符，需要将其替换成 <br>，否则换行将不会被测量。