Textbereich automatisch erweitern

Question

Ich versuche, einen einfachen Textbereich mit automatischer Erweiterung zu erstellen. Das ist mein Code:

textarea.onkeyup = function () {
  textarea.style.height = textarea.clientHeight + 'px';
}

Aber der Textbereich vergrößert sich beim Tippen unendlich...

Ich weiß, dass es dafür Dojo- und jQuery-Plugins gibt, aber ich möchte sie nicht verwenden. Ich habe mir ihre Implementierung angesehen und ursprünglich scrollHeight verwendet, habe aber das Gleiche getan.

Sie können mit der Antwort beginnen und den Textbereich verwenden, um Ihre Antwort abzuspielen.

Answer 1

我希望自动扩展区域受行数限制（例如 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);
};

小提琴：http://jsfiddle.net/cgSj3/

Answer 2

在使用scrollHeight正确扩展/收缩文本区域之前重置高度。 Math.min() 可用于设置文本区域高度的限制。

代码：

var textarea = document.getElementById("textarea");
var heightLimit = 200; /* Maximum height: 200px */

textarea.oninput = function() {
  textarea.style.height = ""; /* Reset the height*/
  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
};

小提琴：http://jsfiddle.net/gjqWy/155

注意：input 事件IE8 及更早版本不支持 。如果您也想支持这个古老的浏览器，请使用 keydown 或 keyup 以及 onpaste 和/或 oncut。