I know there are already n+1 jQuery plugins that handle autosizing textareas. It's a boring, solved problem.
Or is it?
In our search we couldn't find any good plugins that allowed us to very subtly animate the textarea changing. jQuery.autoheight solves exactly that problem.
Old, crappy and out-dated... I mean, not animated, bleh.
Animated, ain't it purdy?
In your code use some selector for textareas that you want to autosize and call
textareaAutoHeight on them like so:
And that's it!
@include transition(height 50ms linear);
It really couldn't be any simpler.
You might be asking yourself how you can contribute to such an awesome project. Look no further, here's your answer:
- Open an issue demonstrating the problem with a clear use case (what did you do, what did you expect to happen, what actually happened?) – Gist, CodePen or jsfiddle happily accepted
- Fix the issue you found and open a pull request
- Describe your fix and why you made any changes unrelated to the fix
If you really want to contribute, here's a good place to start:
- Caret positioning is probably messed up in IE – I did my best to maintain cross-browser support but haven't had the chance to check in IE yet. If anyone is up to the challenge, please try inserting/deleting text at arbitrary positions throughout the textarea and see if it works or breaks.
- It doesn't work when pasting text – obviously this needs to be fixed, and soon; if someone else can get to it before I can, great! If not, I'll get to it eventually.
- Performance? It stills feels a tiny bit sluggish.
Double Plus Bonus
And for reading this all the way through, your reward is a rainbow pooping unicorn. Aren't you lucky?