textarea的自動高度增加

Question

我有HTML <textarea></textarea>和css：

textarea { 
    width: 100%; 
    max-height: 80px; 
    resize: none; 
} 

如果有大量的文字，我想textarea的增加它的高度，直到80px，然後顯示滾動條。問題是，textarea是25px（我不知道爲什麼，可能是我的瀏覽器設置了這個屬性），當有很多文本時，它顯示了一個25px後的滾動條。無論如何只能在80px之後顯示滾動條？

Answer 1

你真的需要JS來做到這一點，見下面的例子：

var textarea = document.getElementById("textarea"); 
 
var limit = 80; //height limit 
 

 
textarea.oninput = function() { 
 
    textarea.style.height = ""; 
 
    textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px"; 
 
};

textarea { 
 
    width: 100%; 
 
}

<textarea id="textarea"></textarea>