我希望自動擴充區域受行數限制(例如 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
。