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>