溫馨提示×

動態調整textarea的寬度和高度以包含文本

小云
380
2023-09-26 04:56:27
欄目: 編程語言

要動態調整textarea的寬度和高度以包含文本,你可以通過JavaScript來實現。下面是一個示例代碼:

<textarea id="myTextarea" oninput="adjustTextareaHeight(this)"></textarea>

<script>

function adjustTextareaHeight(textarea) {

  // 重置textarea的高度

  textarea.style.height = 'auto';

  

  // 調整到適合文本內容的高度

  textarea.style.height = textarea.scrollHeight + 'px';

}

// 在頁面加載完成后調用一次,以確保初始文本也能正確顯示

window.onload = function() {

  var textarea = document.getElementById('myTextarea');

  adjustTextareaHeight(textarea);

};

</script>

上述代碼中,我們綁定了textarea的oninput事件,這樣在用戶輸入文本時會觸發adjustTextareaHeight函數。該函數會重置textarea的高度為默認值,并根據文本內容的高度來調整高度。

此外,在頁面加載完成后,我們還調用了adjustTextareaHeight函數來確保初始文本也能正確顯示。你可以將myTextarea替換為你自己的textarea的id。

通過這種方式,textarea的高度會根據文本內容進行自適應調整,從而完整顯示所有文本。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女