javascript - 自动扩展文本区域

Question

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

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

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

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

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

Answer 1

在使用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";
};

fiddle :http://jsfiddle.net/gjqWy/155

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