Textarea 高度适合内容 - Javascript

在很多情况下，我们需要在网页中使用 textarea 元素来让用户输入大段的文字内容，但是默认的 textarea 高度可能会导致用户的输入体验不佳，因为用户需要频繁地滚动才能看到整个输入框的内容。所以我们需要一个方法来动态地调整 textarea 的高度，使其适合输入的内容。

实现思路

我们可以通过 JavaScript 来获取 textarea 中输入的行数，并根据行数来动态地调整 textarea 的高度。具体步骤如下：

1. 首先，在 HTML 中设置一个 textarea 元素，并给它一个 ID，方便 JavaScript 操作：

   <textarea id="myTextarea"></textarea>
   

2. 然后，在 JavaScript 中获取 textarea 元素，并给它绑定一个 input 事件监听器：

   const textarea = document.querySelector('#myTextarea');
   textarea.addEventListener('input', autoAdjustTextarea);
   

3. 在 autoAdjustTextarea 函数中，获取 textarea 中的文本内容以及字体和行高等信息，并计算出实际的行数：

   function autoAdjustTextarea() {
     const lineHeight = parseInt(getComputedStyle(this).lineHeight);
     const padding = parseInt(getComputedStyle(this).paddingTop) + parseInt(getComputedStyle(this).paddingBottom);
     const offset = this.offsetHeight - this.clientHeight;
     const rows = Math.floor((this.scrollHeight - offset - padding) / lineHeight);
   }
   

4. 最后，根据实际的行数来动态地调整 textarea 的高度：

   function autoAdjustTextarea() {
     // ...
   
     this.style.height = 'auto';
     this.style.height = `${lineHeight * (rows + 1) + padding}px`;
   }
   

完整的代码实现

<textarea id="myTextarea"></textarea>

const textarea = document.querySelector('#myTextarea');
textarea.addEventListener('input', autoAdjustTextarea);

function autoAdjustTextarea() {
  const lineHeight = parseInt(getComputedStyle(this).lineHeight);
  const padding = parseInt(getComputedStyle(this).paddingTop) + parseInt(getComputedStyle(this).paddingBottom);
  const offset = this.offsetHeight - this.clientHeight;
  const rows = Math.floor((this.scrollHeight - offset - padding) / lineHeight);

  this.style.height = 'auto';
  this.style.height = `${lineHeight * (rows + 1) + padding}px`;
}

总结

通过上述的实现，我们可以实现一个能够自动调整 textarea 高度的功能，从而提升用户的输入体验。该方法还可以应用到其他需要动态调整高度的元素中，如聊天框、评论框等。