TextAreaExpander Class for MooTools

I’ve had to create a slew of forms over the last few months, and have become fond of textareas that auto-expand when they become filled. There are a number of MooTools scripts on the interwebs that can handle this task, but none of them suited me, and I generally like to roll my own code as a learning experience.

So, without further ado, I present a very simple MooTools Class: TextAreaExpander. It does exactly what is says: expand textareas. No more, no less.

Details

Options

Defaults are shown.

• textarea_selector: none
  • Uses CSS selector syntax, such as “#myId” or “textarea.expand-o-rama”
• padding_bottom: 0
  • Only accepts pixels, no percentages or ems
• fx_transition: Fx.Transitions.Expo.easeOut
• fx_duration: 350

Returns

Array of textarea elements

Requires

MooTools 1.2.4 core

Demos

Sample implementation using defaults (grabs ALL textareas on the page):

window.addEvent("domready", function (){
    new TextAreaExpander();								  
});

View ’simple’ demo

Sample implementation specifying all available parameters:

window.addEvent("domready", function (){
    new TextAreaExpander({
        textarea_selector: "#demo",
        padding_bottom: 12,
        fx_transition: Fx.Transitions.Quad.easeInOut,
        fx_duration: 500
    });
});

View ‘options’ demo

Download

• Compressed, less than 1kb
• Uncompressed source

License

MIT-style license. Completely free. Enjoy.

Related posts:

1. Rounded corners on images using CSS3
2. A new removeClasses utility for MooTools
3. CustomInput Class: Accessible, Custom-Styled Checkboxes and Radio Buttons
4. Custom modal windows using canvas and MooTools
5. Fun with canvas and MooTools: a Rectangle class