textarea高度自適應詳解

admin發表於2018-11-22

在預設情況下，textarea文字框是沒有高度自適應功能。 

下面分享一段程式碼例項，它實現了textarea高度隨著內容的增加而自適應變化。 

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
  }).on('input', function () {
    this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';
  });
})
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

一.程式碼註釋:

[JavaScript] 純文字檢視 複製程式碼
$(document).ready(function () {
  // code
}

當文件結構完全載入完畢再去執行函式中的程式碼。

[JavaScript] 純文字檢視 複製程式碼
$('textarea').each(function () {
  // code
})

遍歷集合中的每一個textarea元素，當然這裡只有一個textarea元素。

[JavaScript] 純文字檢視 複製程式碼
this.setAttribute('style','height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');

預設設定textarea元素高度為scrollHeight屬性值，並且設定overflow-y:hidden防止出現滾動條。

[JavaScript] 純文字檢視 複製程式碼
on('input', function () {
    this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';
  })

為textarea註冊input事件處理函式，也就是當文字框內容發生變化立馬觸發事件。

然後根據文字框的實際內容高度來設定它的height高度值。

二.相關閱讀:

（1）.each()可以參閱jQuery each()一章節。

（2）.setAttribute()可以參閱setAttribute()一章節。

（3）.scrollHeight可以參閱scrollHeight一章節。

相關文章