文本框的默認現象：
- textarea如果設置cols和rows來規定textarea的尺寸，那么textarea的默認寬高是這倆屬性設置的值，可以通過鼠標拖拽縮放文本框的尺寸。
- textarea如果設定了寬高，那么如果文本超出框的高度，會自動出現滾動條。而不會撐開文本框的高度。
- 如果什么也不設置，最小寬高很窄很細，隨便輸入內容也會超出文本框隱藏，且自動增加滾動條。
首先先做一些表面工作：
設置一些樣式
width: 300px;
height: 300px;
border: 1px solid royalblue;
padding: 20px;
border-radius: 5px;
resize: none;
resize：none； 去掉右下角的這個可自動伸縮的樣子和功能。
然后文字輸入多了，默認就成了這樣：
因為文本框的寬高固定死了， 還是超出出現了滾動條。
怎么讓文本框初始化設置一定的高度，但是文字超出時自動跟隨內容的高度伸縮？
答： 初始化高度通過css設置(如上)，自動伸縮的高度值通過js來計算(如下)。
如果js計算的話，就需要事件觸發，用change事件？
答：但是change事件體驗不好。
為什么？
change事件的現象是，輸入框失去焦點的時候才會觸發。如果文本框內容超出高度然后用戶還在輸入的時候，體驗就會很不好。而且如果用戶一直不點擊別的地方讓textarea失去焦點，這個事件就永遠不會觸發，文本框的高度就不變。
比如輸入過程中，就成了這樣：
然后點擊別的地方才會一次性的展開：
所以需要每次輸入的時候就觸發計算，就得用鍵盤事件而不是change事件：
鍵盤事件需要監聽的是鍵每次彈起的時候，即keyup事件（剛才想了想，貌似監聽keydown按壓事件也不是不可以的）
每次事件觸發的時候，需要做什么？
答：就是計算文本框的滾動高度，即內容高度
具體怎么做？
答：鍵盤每次彈起的時候，獲取文本框的內容高度添加給文本框的高度，即可讓其實時的跟隨內容自適應。
內容高度用什么屬性計算？
即：scrollHeight：給定對象的滾動高度，即內容的可視高度。
function textareaH(box){
let obj = $(box);
obj.style.height = obj.scrollHeight + 'px';
}
$('textarea').on('keyup',function(){
textareaH('textarea');
});
如果一個頁面有多個textarea都需要這個怎么辦？一個一個的加或者調用封裝函數？
不用，可以在計算高度的時候獲取多個，並循環計算:
function textareaH(){
let obj = $('textareaClass'),
len = obj.length;
for (let i = 0; i < len; i++) {
// console.log(obj[i]);
obj[i].style.height = 'auto';
obj[i].style.height = obj[i].scrollHeight + 'px';
}
}
2018-08-22 19:49:56