JS案例 - 可自動伸縮高度的textarea文本框

文本框的默認現象：

• 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