表单输入字段随文本溢出而增长

Question

可能重复：
Jquery growing and shrinking textarea

我想要实现一个效果，当文本超出<input>的容量时，它可以自动垂直增长。因此，不会滚动文本开头，而是会另起一行，并且<input>将会垂直增长。

如何使用JavaScript/jQuery/CSS/HTML等来实现此效果？

- Wiz

---

正确的输入应该使用文本区而不是文本。然后这个问题涵盖了同样的内容：http://stackoverflow.com/questions/988876/jquery-growing-and-shrinking-textarea - Quaternion

Answer 1

您可以使用一个自动增长的 textarea，将其样式设置为 input - 演示

textarea {
    height: 20px;
    line-height: 20px;
    resize: none;
}​

有许多插件可用于实现相同的效果 - 我在演示中使用了这个。

- Zoltan Toth

---

我尝试了你的答案，但它并没有自动增长，即使使用了.autosize()方法也只是出现了滚动条。如果文本区域是动态插入的，可能会有所不同，我在插入后重新绑定了.autosize()方法，但仍然无效。 - Wiz

即使在动态文本区域中，这对我也有效- http://jsfiddle.net/bcHnV/1/ 您是否已经包含了jQuery和插件？ - Zoltan Toth

这是发生的事情：http://jsfiddle.net/bcHnV/2/ - Wiz

你还可以吗？你用的是什么浏览器？ - Zoltan Toth

嗯，这很奇怪。以前没起作用过。 - Wiz

可能是因为我正在使用 Twitter Bootstrap？ - Wiz

Answer 2

一种纯Javascript的方法：

<textarea onkeyup="while(this.scrollTop > 0) {this.rows++;}"></textarea>

- benbai123