Daotin's Blog
textarea使我们常用的表单元素。一般用于多行文字的输入。在绝大多数情况下，都可以满足我们的要求。
但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。
然后有些时候，为了用户体验，我们需要让它的高度随着文本内容的高度而动态变化。
最经典的场景就是微博PC网页版的发微博的输入框：
发微博的输入框会检测输入内容的高度，如果超出的预设的高度，会随着文本的高度的增加而增加，当文本高度减少的时候，文本框的高度也会随着减少。
今天，就来尝试自己实现这个功能。
实现思路
方法一
首先想到的方法就是通过js检测文本的高度，然后动态设置文本框的高度。
这是我的第一想法，也是最容易实现的想法。
具体思路：当出现滚动条的时候，文本的实际高度就是**scrollHeight**，我们只需要设置文本框的高度为内容的**scrollHeight**即可。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo1</title>
<style>
textarea {
width: 200px;
min-height: 100px;
padding: 0;
}
</style>
</head>
<body>
<textarea placeholder="input..."></textarea>
</body>
<script>
var textarea = document.querySelector('textarea');
textarea.addEventListener('input', (e) => {
textarea.style.height = '100px';
textarea.style.height = e.target.scrollHeight + 'px';
});
</script>
</html>
注意点：
由于textarea默认是有padding 的，所以在设置文本框高度的时候要减去padding*2
需要在每次设置scrollHeight之前，设置一次文本框的初始高度
textarea.style.height = '100px';，这样在文本内容减少的时候，文本框的高度才会减少。
剩下的方法是我总结的网上一些其他的奇淫技巧，基本上都是一些我认为比较容易实现的，有些太麻烦的我就不列举了。
方法二
方法二的思路是：
- 将
textarea外面套一个容器box，同时在这个box中放入一个隐藏的div（visibility:hidden） - 监听
textarea的输入事件并将其中的文本动态的同步到div中，这样div 就可以撑开容器box - 由于div的高度和文本框的高度一致，那么
textarea的高度自然就是其中文字内容的高度了。
注意点：
- div和textarea需要设置相同的
padding，和相同的行号line-height，相同的字体，否则高度不同步。
参考链接
- https://www.zhangxinxu.com/wordpress/2010/12/div-textarea-height-auto/
- https://blog.csdn.net/qq_32963841/article/details/85781621
- https://www.cnblogs.com/nkqlhqc/p/12035350.html
（完）
以上，如果你看了觉得对你有所帮助，就点个赞叭，这样队长也有更新下去的动力，跪谢各位父老乡亲啦~~~ 听说喜欢点赞的人，一个月内都会有好运降临哦 ~~
