textarea的scrollHeight 自适应高度
在使用 `<textarea>` 元素时，如果需要实现 `scrollHeight` 的自适应高度功能，可以通过监听其内容变化并动态调整其高度来实现。以下是一个详细的解决方案：
---
### 实现思路：
1. **监听输入事件**：通过监听 `<textarea>` 的 `input` 或 `keyup` 事件，实时捕获用户输入的内容变化。
2. **获取 `scrollHeight`**：利用 `scrollHeight` 属性获取当前内容的高度。
3. **设置高度**：将 `<textarea>` 的高度设置为 `scrollHeight`，以确保内容始终可见且没有滚动条。
---
### 示例代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea 自适应高度</title>
<style>
textarea {
width: 100%;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
resize: none; /* 禁止手动调整大小 */
}
</style>
</head>
<body>
<textarea id="autoHeightTextarea"></textarea>
<script>
const textarea = document.getElementById(\'autoHeightTextarea\');
// 定义一个函数来更新 textarea 的高度
function adjustHeight() {
textarea.style.height = \'auto\'; // 重置高度
textarea.style.height = `${textarea.scrollHeight}px`; // 设置为 scrollHeight
}
// 监听输入事件
textarea.addEventListener(\'input\', adjustHeight);
// 初始化高度
adjustHeight();
</script>
</body>
</html>
```
---
### 关键点解析：
1. **`scrollHeight` 的作用**：
- `scrollHeight` 是 DOM 元素的一个属性，表示元素内容的实际高度（包括溢出部分），即使该部分不可见。
- 使用它可以帮助我们动态调整 `<textarea>` 的高度，使其始终能够容纳所有内容。
2. **`autoHeight` 的实现**：
- 在每次输入后，首先将 `height` 设置为 `\'auto\'`，这样可以确保浏览器重新计算内容的高度。
- 然后根据 `scrollHeight` 设置新的高度，使内容完全显示。
3. **禁用手动调整大小**：
- 通过设置 `resize: none` 样式，禁止用户手动拖动 `<textarea>` 的大小，保持自适应效果的一致性。
---
### 可扩展性：
如果需要支持更多功能（如多行换行、自动缩进等），可以在 `adjustHeight` 函数中添加额外逻辑。例如：
- 添加防抖机制，减少频繁触发调整高度的操作。
- 支持最大高度限制，避免内容过长导致界面变形。
希望这个方案能满足你的需求！如果有其他问题或需要进一步优化，请随时告知。