{"id":324427,"date":"2020-11-11T07:22:28","date_gmt":"2020-11-11T15:22:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=324427"},"modified":"2020-11-11T07:22:30","modified_gmt":"2020-11-11T15:22:30","slug":"the-cleanest-trick-for-autogrowing-textareas","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-cleanest-trick-for-autogrowing-textareas\/","title":{"rendered":"The Cleanest Trick for Autogrowing Textareas"},"content":{"rendered":"\n

Earlier this year I wrote a bit about autogrowing textareas and inputs<\/a>. The idea was to make a <textarea><\/code> more like a <div><\/code> so it expands in height as much as it needs to in order to contain the current value. It’s almost weird there isn’t a simple native solution for this, isn’t it? Looking back at that article, none of my ideas were particularly good. But Stephen Shaw’s idea<\/a> that I linked to toward the end of it is actually a very<\/em> good idea for this, so I wanted to shine some light on that and talk through how it works, because it seems like it’s the final answer to how this UX can be done until we get something native and better.<\/p>\n\n\n\n\n\n\n\n

Here’s the demo in case you just want a working example:<\/p>\n\n\n\n