This post is about emulating
textareaelement to create a text wrapping input that adjusts its height to the amount of content it holds. A working example can be found on Plunker.
When was the last time you asked yourself about
input[text] element's user experience and usability? Well in normal situation (that is likely 90% of the time) this element works great but in the remaining cases it may not be ideal. Whenever you need your users to enter long(er) one-liners
input[text] may not be your best option as it can't wrap text so part of it outside element's boundaries is being hidden. If nothing else, it's distracting to users.
You mainly have two options here each with its ups and downs:
textareaelement - very similar to
input[text]as it allows entering unformatted text that can wrap as many lines as its length requires; it has some styling problems though (I'll explain that in a bit) and also allows entering multiple lines of text which may be undesirable but easy to handle/prevent
- content editable
divelement - it can easily be styled to look exactly like
input[text]and it also wraps long lines of text (normally) just like
textarea; the main problem is controlling its behaviour to prevent text formatting in a cross browser way
Of the two options the first one seems simpler so let's implement it.