html / javascript - Turn input text into textarea when space runs out

Question

So I have a text input.

<input type="text" id="myText" style="width: 400px; height: 20px;">

I want to turn it into a textarea when there is no longer enough space to type stuff in.

Once the text input has run out of space, I want to change it to something like this:

<textarea id="myText" style="width: 400px; height: 40px; resize: none;"></textarea>

And when the space in the textarea has run out, its height will be changed again:

<textarea id="myText" style="width: 400px; height: 60px; resize: none;"></textarea>

The main problem that I am facing is turning the original input text into a textarea. Is there an easy way besides trial and error to really detect if the space has run out? And how do I change my text input into a textarea once the space has run out?

Thanks.

Answer 1

I think having two different elements complicates things, have a look at only having a textarea element and then expand it as needed. There's a jQuery plugin you might want to look into if you're ok with using jQuery: http://www.jacklmoore.com/autosize/