溫馨提示×

textarea賦值與自適應高度技巧

小樊
727
2024-07-08 13:47:13
欄目: 編程語言

通常情況下，一個文本框（textarea）的高度是固定的，用戶可以通過拖動邊框來調(diào)整文本框的大小。然而，在某些情況下，我們可能希望文本框的高度能夠根據(jù)輸入的內(nèi)容自動調(diào)整，以便更好地顯示所有文本內(nèi)容。下面是一種實現(xiàn)textarea自適應高度的技巧：

  1. 使用CSS樣式設(shè)置textarea的高度為auto，這樣textarea的高度會根據(jù)內(nèi)容的多少自動調(diào)整。
textarea {
  height: auto;
}
  1. 使用JavaScript來監(jiān)聽textarea的輸入事件，并根據(jù)輸入的內(nèi)容來調(diào)整textarea的高度。
let textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});

通過上面的代碼，當用戶輸入內(nèi)容時，textarea的高度會根據(jù)內(nèi)容的多少自動調(diào)整，以確保所有文本內(nèi)容都能夠完整顯示出來。這樣就實現(xiàn)了textarea自適應高度的效果。

0 踩