textarea内容自动撑开高度，实现高度自适应

封面图 • 2026-01-11 • Html/Css

要实现 `<textarea>` 内容自动撑开高度（即高度自适应内容），可以通过 JavaScript 动态计算内容的高度，并设置 `textarea` 的 `style.height` 属性。以下是一个常见的实现方式：

---

### ✅ 实现思路

1. 监听 `input` 或 `keyup` 事件。
2. 在事件处理函数中，将 `textarea` 的 `style.height` 设置为 `0`（重置高度）。
3. 然后将 `textarea` 的 `style.height` 设置为 `scrollHeight`（内容的实际高度）。

---

### ✅ 示例代码（HTML + JavaScript）

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Auto Resize Textarea</title>
  <style>
    textarea {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      resize: none; /* 禁用用户手动调整大小 */
    }
  </style>
</head>
<body>

function autoResize() {
    textarea.style.height = '0'; // 重置高度
    textarea.style.height = textarea.scrollHeight + 'px'; // 设置为实际内容高度
  }

// 监听输入事件
  textarea.addEventListener('input', autoResize);

// 初始调用一次，防止页面加载时高度为0
  autoResize();
</script>

</body>
</html>
```

---

### ✅ 注意事项

- `scrollHeight` 是元素内容的总高度，包括不可见的部分。
- 使用 `resize: none;` 可以避免用户手动调整大小。
- 如果你需要支持旧浏览器（如 IE），可能需要使用其他方法或 polyfill。

---

### ✅ 可选优化：防抖（Debounce）

如果你的文本框内容频繁变化，可以加一个防抖来减少性能消耗：

```javascript
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

textarea.addEventListener('input', debounce(autoResize, 100));
```

---

如果你有其他需求，比如限制最大高度、支持富文本编辑器等，也可以告诉我，我可以提供更详细的解决方案。