大家好,我是前端隊長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
(完)
以上,如果你看了覺得對你有所幫助,就點個贊叭,這樣隊長也有更新下去的動力,跪謝各位父老鄉親啦~~~ 聽說喜歡點讚的人,一個月內都會有好運降臨哦 ~~