Question

我正在尝试做一个简单的自动扩展textarea。这是我的代码：

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

但是当你打字时，textarea会无限期地增长......

我知道有Dojo和jQuery插件，但不想使用它们。我查看了他们的实现，并且最初使用的是scrollHeight，但它做了同样的事情。

您可以开始回答并使用textarea来回答您的问题。

Answer 1

在使用scrollHeight正确展开/缩小textarea之前重置高度。 Math.min()可用于设置textarea高度的限制。

代码：

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

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

Answer 2

我想让自动扩展区域受到行号（例如5行）的限制。我考虑过使用＆＃34; em＆＃34;单位，Rob's solution但是，这是error-prone并且不会考虑填充等内容。

所以这就是我想出来的：

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 3

对于那些对Rob W's解决方案的jQuery版本感兴趣的人：

var textarea = jQuery('.textarea');
textarea.on("input", function () {
    jQuery(this).css("height", ""); //reset the height
    jQuery(this).css("height", Math.min(jQuery(this).prop('scrollHeight'), 200) + "px");
});

Answer 4

...如果你需要一个无限扩展的textarea（正如我所做的那样），那就这样做：

var textarea = document.getElementById("textarea");

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

Answer 5

使用

<div contentEditable></div>

也可以做同样的工作，自我扩展，不需要js

自动扩展textarea

5 个答案: