Textpandable: jQuery Expanding Textarea Plugin v0.9

Just wrote my first jQuery plugin!  Textpandable is a plugin that enables textareas to auto-resize to fit content.  Just load jQuery and Textpandable, and include the following Javascript:

$(‘textarea’).textpandable();

…and voilà!  All of your textareas are expandable, like this:

Textpandable in ActionTextpandable offers the following options:

  • lineHeight: Specify the lineHeight of the textarea–as a Textpandable option or a CSS declaration.
  • minRows and maxRows: Set limits to how small or big your textarea will expand to.
  • padding: Set a number of extra rows to provide for “padding”.  1-2 rows is usually a good value.
  • width: Number of characters to allow per line before adding an extra row.  If not set, Textpandable tries its best to determine safe values based on CSS declarations, col attributes, and/or pixel width.

Now, I’m calling this version 0.9 for a few reasons:  I haven’t tested this in IE yet, and I haven’t documented the code (although it’s really simple)…  but most of all, it’s not feature-complete: I want to get animations working.  Unfortunately, with animations turned on, any change in size causes the cursor position to skip to the end and/or lose focus.  I’m not experienced enough with the innards of jQuery to know why this would be happening.

It works just fine with the default speed setting of ’0′ (as I’ve short-circuited the animation script in this case).  Anyone who gets animation working will be my hero!

Download Textpandable v0.9 (Dual-Licensed MIT & GPL)

This entry was posted in General. Bookmark the permalink.

5 Responses to Textpandable: jQuery Expanding Textarea Plugin v0.9

  1. Thanks for this. I found 2 other similar plugins, but they were much more buggy. I’ve tested in IE8, and am very happy with this. Nice job!

  2. Alinaki says:

    Your code works perfectly in IE’s (6,7,8), Thanx!

  3. Me says:

    Hi,
    I found out that your code doesn’t work in Firefox, whysthat ?

  4. Me says:

    I’m using 3.6.3. What’s strange, firebug shows no errors.

Leave a Reply to Me Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>