文本区域自动增加高度

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>

文本区域自动增加高度

Textarea auto-height-increase

html

css

textarea