我希望自动扩展区域受行数限制(例如 5 行)。我考虑过使用“em”单位,对于 Rob 的解决方案,但是,这是 容易出错并且不会考虑填充等内容。
这就是我的想法:
var textarea = document.getElementById("textarea");
var limitRows = 5;
var messageLastScrollHeight = textarea.scrollHeight;
textarea.oninput = function() {
var rows = parseInt(textarea.getAttribute("rows"));
// If we don't decrease the amount of rows, the scrollHeight would show the scrollHeight for all the rows
// even if there is no text.
textarea.setAttribute("rows", "1");
if (rows < limitRows && textarea.scrollHeight > messageLastScrollHeight) {
rows++;
} else if (rows > 1 && textarea.scrollHeight < messageLastScrollHeight) {
rows--;
}
messageLastScrollHeight = textarea.scrollHeight;
textarea.setAttribute("rows", rows);
};
我希望自动扩展区域受行数限制(例如 5 行)。我考虑过使用“em”单位,对于 Rob 的解决方案,但是,这是 容易出错并且不会考虑填充等内容。
这就是我的想法:
小提琴:http://jsfiddle.net/cgSj3/
在使用
scrollHeight
正确扩展/收缩文本区域之前重置高度。Math.min()
可用于设置文本区域高度的限制。代码:
小提琴:http://jsfiddle.net/gjqWy/155
注意:
input
事件IE8 及更早版本不支持 。如果您也想支持这个古老的浏览器,请使用keydown
或keyup
以及onpaste
和/或oncut
。