Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Yet another autosize textarea jQuery plugin that allows animating the changes via CSS3 transitions

branch: master

README updates

latest commit a3a2b3a8e3
Joe Fiorini authored
README.md

textareaAutoHeight

Background

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.

A textarea that does not animate the change in height

Animated, ain't it purdy?

A textarea that subtly animates the change in height

Usage

Grab both jquery.textareaAutoHeight.js and jquery.fieldselection.js and put them wherever you keep your vendored javascripts.

In your code use some selector for textareas that you want to autosize and call textareaAutoHeight on them like so:

  $("textarea[autosize=true]").textareaAutoHeight();

And that's it!

Bonus!!!

And you thought you just came here for a Javascript plugin, didn't you? Here's the CSS snippet I use to animate this (using SCSS & Compass's CSS3 mixins):

  @include transition(height 50ms linear);

It really couldn't be any simpler.

Contribute

You might be asking yourself how you can contribute to such an awesome project. Look no further, here's your answer:

  1. 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
  2. Fix the issue you found and open a pull request
  3. Describe your fix and why you made any changes unrelated to the fix

Known Issues

If you really want to contribute, here's a good place to start:

  1. 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.
  2. 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.
  3. 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?

This is a picture of a unicorn pooping a rainbow. You are probably lucky you can't see it.

Something went wrong with that request. Please try again.