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.



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


Array of textarea elements


MooTools 1.2.4 core


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

window.addEvent("domready", function (){ new TextAreaExpander(); });
Code language: JavaScript (javascript)

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 }); });
Code language: JavaScript (javascript)

View ‘options’ demo



MIT-style license. Completely free. Enjoy.

Similar Posts