Form input field grows with overflowing text [duplicate]

Question

Possible Duplicate:
Jquery growing and shrinking textarea

I want to achieve an effect where a text <input> will grow vertically when the text overflows. So instead of the beginning text being scrolled off, a new line starts, and the <input> grows vertically.

How could I achieve this using Javascript/jQuery/CSS/HTML/etc?

Answer 1

You probably can use an autogrowing textarea styled as an input - DEMO

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

There are numerous plugins exists to achieve the same effect - I used this for the demo.

Answer 2

A pure Javascript way:

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