使 textarea 自动高度 - Javascript

当用户在 textarea 中输入文本时，往往会出现文本超出 textarea 的限制的情况，此时就需要通过调整 textarea 的高度来适应文本内容。本文将介绍如何使用 Javascript 实现使 textarea 自动适应文本高度的效果。

实现思路

首先需要得到 textarea 中文本的高度，再根据文本高度来调整 textarea 的高度。实现的具体思路如下：

1. 获取 textarea 中文本的高度
2. 设置 textarea 的高度为文本高度
3. 监听 textarea 的 input 事件，随时更新 textarea 的高度

代码实现

下面是使用原生 Javascript 实现使 textarea 自动高度的代码：

function autoHeight(element) {
  element.style.height = 'auto';
  element.style.height = element.scrollHeight + 'px';
}

const textarea = document.querySelector('textarea');

if (textarea) {
  textarea.addEventListener('input', () => {
    autoHeight(textarea);
  });

  window.addEventListener('resize', () => {
    autoHeight(textarea);
  });
}

首先定义了一个 autoHeight() 函数，用于自适应 textarea 的高度。这个函数会先将 textarea 的高度设置成 auto，再将其高度设置为 scrollHeight，即文本的高度。

然后通过 querySelector() 方法获取到 textarea 元素，并监听它的 input 事件和窗口的 resize 事件。当用户在 textarea 中输入文本或浏览器窗口大小改变时，就会自动调用 autoHeight() 函数，将 textarea 的高度自适应文本内容。

Markdown 代码块

# 使 textarea 自动高度 - Javascript

当用户在 `textarea` 中输入文本时，往往会出现文本超出 `textarea` 的限制的情况，此时就需要通过调整 `textarea` 的高度来适应文本内容。本文将介绍如何使用 Javascript 实现使 `textarea` 自动适应文本高度的效果。

## 实现思路

首先需要得到 `textarea` 中文本的高度，再根据文本高度来调整 `textarea` 的高度。实现的具体思路如下：

1. 获取 `textarea` 中文本的高度
2. 设置 `textarea` 的高度为文本高度
3. 监听 `textarea` 的 `input` 事件，随时更新 `textarea` 的高度

## 代码实现

下面是使用原生 Javascript 实现使 `textarea` 自动高度的代码：

```javascript
function autoHeight(element) {
  element.style.height = 'auto';
  element.style.height = element.scrollHeight + 'px';
}

const textarea = document.querySelector('textarea');

if (textarea) {
  textarea.addEventListener('input', () => {
    autoHeight(textarea);
  });

  window.addEventListener('resize', () => {
    autoHeight(textarea);
  });
}

首先定义了一个 autoHeight() 函数，用于自适应 textarea 的高度。这个函数会先将 textarea 的高度设置成 auto，再将其高度设置为 scrollHeight，即文本的高度。

然后通过 querySelector() 方法获取到 textarea 元素，并监听它的 input 事件和窗口的 resize 事件。当用户在 textarea 中输入文本或浏览器窗口大小改变时，就会自动调用 autoHeight() 函数，将 textarea 的高度自适应文本内容。