textarea内容自动撑开高度，实现高度自适应
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。
以下正文：
textarea使我们常用的表单元素。一般用于多行文字的输入。在绝大多数情况下，都可以满足我们的要求。
但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。
然后有些时候，为了用户体验，我们需要让它的高度随着文本内容的高度而动态变化。
最经典的场景就是微博PC网页版的发微博的输入框：
发微博的输入框会检测输入内容的高度，如果超出的预设的高度，会随着文本的高度的增加而增加，当文本高度减少的时候，文本框的高度也会随着减少。
今天，就来尝试自己实现这个功能。
实现思路
方法一
首先想到的方法就是 通过js检测文本的高度，然后动态设置文本框的高度 。
这是我的第一想法，也是最容易实现的想法。
具体思路：
当出现滚动条的时候，文本的实际高度就是
**scrollHeight**
，我们只需要设置文本框的高度为内容的
**scrollHeight**
即可。
代码实现：
<!DOCTYPE html>
<html lang="en">
<title>demo1</title>
<style>
textarea {
width: 200px;
min-height: 100px;
padding: 0;
</style>
</head>
<textarea placeholder="input..."></textarea>
</body>
<script>
var textarea = document.querySelector('textarea');
textarea.addEventListener('input', (e) => {
textarea.style.height = '100px';