textarea的scrollHeight 自适应高度

封面图 • 2025-12-02 • Html/Css

在 HTML 中，`<textarea>` 元素的 `scrollHeight` 是用来表示其内容的实际高度（包括溢出部分），但默认情况下它不会自动调整高度以适应内容。如果你希望 `<textarea>` 的高度能**自适应内容**，可以使用 JavaScript 来动态设置其高度。

---

## ✅ 实现方法：通过 JavaScript 动态设置 `textarea` 高度

### 1. 基本思路
- 当用户输入内容时，监听 `input` 或 `keyup` 事件。
- 获取 `textarea` 的 `scrollHeight`。
- 设置 `textarea` 的 `style.height` 为 `scrollHeight`。

---

### 2. 示例代码

```html
<textarea id="autoResizeTextarea" rows="1" oninput="resizeTextarea(this)"></textarea>

---

### 3. 注意事项

- `rows="1"` 是为了初始高度最小，避免浏览器默认的高度。
- `oninput` 事件会在用户输入时触发，适合实时调整。
- 如果你希望在页面加载时也自动调整（比如有预填充内容），可以在 `window.onload` 中调用一次 `resizeTextarea()`。

---

### 4. 完整示例（含初始化）

```html
<!DOCTYPE html>
<html>
<head>
    <title>Auto Resize Textarea</title>
</head>
<body>

// 页面加载时也调整一次
window.onload = function() {
    const textarea = document.getElementById('autoResizeTextarea');
    if (textarea) {
        resizeTextarea(textarea);
    }
};
</script>

</body>
</html>
```

---

## ✅ 可选优化

- **防抖处理**：如果输入频繁，可以加一个防抖函数，提升性能。
- **最大高度限制**：可以通过设置 `max-height` 来防止高度无限增长。

```css
#autoResizeTextarea {
    max-height: 200px;
    overflow-y: auto;
}
```

---

## 📝 总结

| 方法 | 说明 |
|------|------|
| `scrollHeight` | 表示文本区域内容的实际高度 |
| `oninput` | 监听用户输入事件 |
| `resizeTextarea()` | 动态设置高度 |

如需支持多行、富文本编辑器等复杂场景，建议使用第三方库如 [Quill](https://quilljs.com/) 或 [TinyMCE](https://www.tiny.cloud/) 等。

需要我帮你封装成一个可复用的组件吗？

textarea的scrollHeight 自适应高度