大家好，我是前端隊長Daotin，想要獲取更多前端精彩內容，關注我(全網同名)，解鎖前端成長新姿勢。
以下正文：
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
（完）
以上，如果你看了覺得對你有所幫助，就點個贊叭，這樣隊長也有更新下去的動力，跪謝各位父老鄉親啦~~~ 聽說喜歡點贊的人，一個月內都會有好運降臨哦 ~~
