How to make an INPUT field dynamically change itself into a TEXTAREA in a Bootstrap4/jQuery webapp?

Question

How can I make an INPUT field dynamically change itself into a TEXTAREA in the browser, based on certain conditions (like the amount of text in it), without any extra logic server-side?

I have not tried anything yet, because I don't want to reinvent the wheel. I searched SO and found nothing. I'm looking for something like:

$('#myinputfield').automatically_morph_input_type_based_on_contents();

I'm looking for a client-side solution without any server-side logic. — Alex R, Oct 17 '18 at 17:03
Found a partial but close-enough solution at [jQuery change input type=text to textarea](https://stackoverflow.com/questions/9112409/jquery-change-input-type-text-to-textarea) — Alex R, Oct 22 '18 at 18:10

score 0 · Answer 1 · answered Oct 17 '18 at 17:10

I doubt you'll find anything that is already prebuilt.

A simple thing you should consider is that, whether you really need an input or a textarea. And if you still think you need to switch between the too then you'll just have to dynamically create the two.

First remove the old element, create the new element, use the value, id, name and other attributes from the old element. Apply the same process for the next change.

How to make an INPUT field dynamically change itself into a TEXTAREA in a Bootstrap4/jQuery webapp?

1 Answers1