1

Great post! I recently stumbled across this problem when designing a website. Solved it with one of those keyup solutions; was never really happy about it. This will definitely fix it! Thanks.

posted at 09:10 am on November 1, 2011 by iasmatt

2 Excellent coverage. Should it work on iOS?

I read this article on the bus commute, didn’t seem to be working on iPhone 4, pre iOS5 update. Excellent technique however. Looking forward to blasting the future with awesome textareas.

posted at 10:34 am on November 1, 2011 by Nate Vaughn

3 Very Nice

I really like this technique – it is better than a lot of the others I have seen. I threw together a jQuery plugin version based on your code that limits the amount of extra CSS and handles some of the cross browser issues, while automatically initializing textareas with an ‘expanding’ class on load:

http://jsfiddle.net/bgrins/UA7ty

The other thing it does is attempt to gather any possible CSS from the textarea for things like font and spacing when initializing the mirror ‘pre’ tag. This is helpful in case there are properties that you don’t remember or know about resetting for both the ‘pre’ and the ‘textarea’. Obviously, this doesn’t work for percentage paddings and widths, etc – it is still best to define rules for both at the same time, but it might make it a little easier to drop into an existing system if it handles CSS rules that cascaded down to either the textarea or pre.

Note: I haven’t really tested this in IE. You mentioned the onpropertychange event not delegating properly: jQuery may or may not handle that transparently.

posted at 12:51 pm on November 1, 2011 by bgrins

4 GitHub Repository

@bgrins, thought about making a GitHub Repository for your plugin? I was thinking of making one for it, but I don’t want to copy your code if you are going to make one.

posted at 01:36 pm on November 1, 2011 by Zoram

5 Github Repository

Zoram, sure. I have created the github repository at: https://github.com/bgrins/ExpandingTextareas

As I said, IE is not yet supported, but I will update it when I get a chance to test IE.

posted at 03:24 pm on November 1, 2011 by bgrins

6 minor tweak

I’m sure this would be an easy tweak in the code but it seems like if you’re going to have an expanding text area you should always have more than one line to start with so someone knows up front that they are able to put in more than one line of text, otherwise as they type the might cut it short before they realize that more lines can be added…

posted at 03:58 pm on November 1, 2011 by aBrentApart

7 Multiple Line Start

@aBrentApart, a simple way to do this would be to add a min-height property to your CSS for the element that controls the height of the textarea.

If you did a min-height: 2em; (adjust for your line-height) then it would start off with two rows of height and would start adjusting once you are over two lines.

posted at 06:15 pm on November 1, 2011 by Zoram

9 Minimum Height

@Neil, exactly. In the demo for the plugin that bgrins setup you can see an example of single line or multiple line starting heights all controlled by the CSS:

http://bgrins.github.com/ExpandingTextareas/

You could use media queries to also change the number of lines depending upon the screen size/functionality.

posted at 11:45 pm on November 1, 2011 by Zoram

10 box-sizing should work without prefix in IE

I don’t think IE needs the prefix here:

-ms-box-sizing: border-box;

posted at 07:10 pm on November 2, 2011 by Thierry Koblentz