Javascript 自动扩展文本区域

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

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

但是文本区域会随着你的输入而无限增长

我知道有Dojo和jQuery插件可以实现这一点，但我宁愿不使用它们。我查看了它们的实现，最初使用的是

scrollHeight

，但这也做了同样的事情

---

您可以开始回答并使用文本区播放您的答案

在使用

scrollHeight

正确展开/缩小文本区域之前，请重置高度

Math.min（）

可用于设置textarea高度的限制

代码：

小提琴：

---

注：IE8及更早版本不支持。如果您还想支持这种古老的浏览器，请使用

keydown

或

keydup

和

oncut

。

我希望自动扩展区域受行数限制（例如5行）。我考虑过使用“em”单位，但是，这是，不会考虑像填充等东西

这就是我想到的：

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);
};

var textarea=document.getElementById（“textarea”）；
var=5；
var messageLastScrollHeight=textarea.scrollHeight；
textarea.oninput=函数（）{
var rows=parseInt（textarea.getAttribute（“rows”）；
//如果不减少行数，scrollHeight将显示所有行的scrollHeight
//即使没有文本。
setAttribute（“行”，“1”）；
if（行messageLastScrollHeight）{
行++；
}else if（行>1&&textarea.scrollHeight

小提琴：使用

---

也可以做同样的工作，自行扩展，对jQuery版本的解决方案感兴趣的人不需要js：

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");
});

---

…如果您需要一个无限扩展的文本区域（如我所做的），只需执行以下操作：

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

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

---

我在代码中编辑了一个输入错误，引用变量“report”是我在这里编辑问题时犯的一个错误。这并不是文本区域无限增长的原因。重复：可能重复的重复（30+答案）+1：很好。。。我一直在寻找一种可靠的方法。这是否也解释了一些细微差别，如粘贴到文本区域等？仅供参考-我发布了一个解决方案，允许您按行而不是像素进行限制：这是一个有趣的解决方案，但不能考虑预先存在的值，或者粘贴的值占用了1行以上。

var rows=textarea.rows

作者声明不使用jquery。作者声明他们不想使用jquery插件。这个解决方案不是一个插件，它是纯jQuery。这对我来说完全没有任何作用。

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

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