Flext: MooTools Auto-Growing Textrea Plugin
This post was authored by Graham McNicoll.
A while back David Walsh published a list of 7 MooTools Plugins You Should Use on Every Website which included 'AutoGrow' a text area expander plugin. 'AutoGrow' is very similar in results to the class I wrote for Education.com, Flext. I decided to release this code as 'AutoGrow' has a few things I don't like (mostly the flashing the scroll bars while growing, no max height, and the way it watches the textareas 3 times a second). Flext also has a few additional features:
- Grows text areas when needed
- Can set a max height to grow to
- Can grows parents if they have a fixed height
- Ghost text/text overlay for input context and help
- Text input emulation (enter can submit form, instead of new line)
I wrote Flext so that our designers and other engineers can easily use these features with just a few class names. The classes used by Flext are:
- flext - The class needed for the class to find this text area
- growme - Automatically grows the text area
- maxheight-[num] - The max height to grow (in pixels)
- growparents - Grows the parent elements if needed
- stopenter - Stops the enter key from making a newline
- entersubmits - Submit the form when enter is pressed
- replaceghosttext - Tries to use the ghosted text features (requires a few additional things)
For instance to create a basic growing textarea all you have to do is:
<textarea class="flext growme"></textarea>
A max height can be set by using a class name as well:
<textarea class="flext growme maxheight-200"></textarea>
The above example grows to 200px then behaves like a normal textarea.
There are a few things with Flext which could be improved: one is that the textareas do not shrink (it was considered unnecessary for our uses), the other is that to use the ghosted text features requires some non valid html. I can fix these problems if there is enough demand.