通常情況下,一個文本框(textarea)的高度是固定的,用戶可以通過拖動邊框來調整文本框的大小。然而,在某些情況下,我們可能希望文本框的高度能夠根據輸入的內容自動調整,以便更好地顯示所有文本內容。下面是一種實現textarea自適應高度的技巧:
textarea {
height: auto;
}
let textarea = document.querySelector('textarea');
textarea.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
通過上面的代碼,當用戶輸入內容時,textarea的高度會根據內容的多少自動調整,以確保所有文本內容都能夠完整顯示出來。這樣就實現了textarea自適應高度的效果。