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>