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.

@PatrickEvans Not really. I want to turn the text input into textarea once it runs out of space. Not auto-expanding the textarea. I already know how to auto-expand it. — chris97ong
– chris97ong, Commented Apr 11, 2014 at 10:13
on textchange event check length and on increasing particular length convert it to textarea. and on decreasing length revert it. — Zaheer Ahmed
– Zaheer Ahmed, Commented Apr 11, 2014 at 10:15
Seems easier to just use an expanding textarea, instead of trying to switch between the two, but ok. are you wanting it to switch back to a textbox if they end up deleting certain amount? — Patrick Evans
– Patrick Evans, Commented Apr 11, 2014 at 10:16

Strille · Accepted Answer · 2014-04-11 10:10:22Z

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/

answered Apr 11, 2014 at 10:10

Strille

5,7913 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related