Flext: MooTools Auto-Growing Textrea Plugin

By on  

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.

Track.js Error Reporting

Recent Features

  • 5 More HTML5 APIs You Didnât Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

Incredible Demos

  • Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events....

  • GitHub-Style Sliding Links

    GitHub seems to change a lot but not really change at all, if that makes any sense; the updates come often but are always fairly small. I spotted one of the most recent updates on the pull request page. Links to long branch...


  1. Anywhere we can see the Ghost text in action?
    Also when pasting into the demo box it didnt seem to expand, until I moved down the cursor. Although in the size constrained text area it worked wonderfully .

    Nice class :)

  2. Uh, it doesn’t shrink back? :P

  3. adamnfish

    Like Paul says, it looks like it only fires on keyup, so pasting with the mouse (for instance) doesn’t do anything. It could listen to blur/change as well, which would help a little?

  4. Graham isn’t around yet but I think I can respond to a few of these:

    @Lim Chee Aun: Good point, that should be added. I can’t see someone adding in a ton of text and then removing it though — if it doesn’t shrink down and there are a few extra lines worth of height, I don’t see that as being a big deal.

    @adamnfish: Good idea — possibly a mouseleave or mouseup event could trigger a check as well?

  5. like people pointed, copy/pasting does not update until you start typing again. Not the end of the world, but I have been able to solve this isssue using a periodical function instead of using the key event http://tools.uvumi.com/textarea.html . And it shrink back to orginal size too. The downloadable version is outdated. I have been able to restore the maxHeight option since. If anyone is interested by the latest version I can put it somewhere.

  6. Ahmed

    I love it, however… I’m with Lim Chee Aun. You need to add a shirnk-back rule.

    BTW, could it be applied to all text areas w/o giving them a specific class?

  7. Great plugin David!
    The smoothness when increasing size is fantastic.

    Got a jQuery verion for it xD?

  8. Graham McNicoll

    @Lim Chee Aun: We considered doing shrinking, but we decided it wasn’t too important for our users. We were mostly giving the user a bit more space to see their typing. To do the shrinking requires more javascript and I like to keep my scripts light. If you like I can add it as an option.

    @adamnfish:The change event doesn’t get fired until the blur for textareas, so that wouldn’t fix that problem. Mouse up doesnt work either because if your right clicking to paste, the ‘paste’ is usually outside of the textarea anyway. And it doesnt address the browsers ‘edit-> paste’ option. MouseEnter, mouseLeave might work better, or watching window click events… but I reckoned that was overly cpu intensive, as is doing a periodical. But I could add the periodical check as an option as well…

    @Ahmed: you could, but you would have to edit the code a bit. At the moment its looking for the class ‘flext’ at the bottom of the JS, you could remove that class from the selector, then you would have to remove the ‘hasClass’ checks for which ever one you want- just change it to ‘true’ for auto grow.

  9. Ahmed

    @Graham Thanks, that definitely works.

  10. Just to provide more clarity to my/Adamnfish comment earlier. When I pasted into the normal text area, it did not expand until I started typing. However when I pasted into the text area box thats size constrained it worked fine and resized as soon as I pasted. But I cant see why, so maybe something in that code will help?

  11. Can this be adapted for something like fckeditor?

  12. Graham McNicoll

    The demos are updated to show some more features of the class, including the ghost text, and growing parents.

    @Adriaan : I don’t believe so, as FCKeditor does some replacement so that what you are typing into is no longer a textarea.

    @Paul Mccann: It now monitors click and change events, but pasting using the edit->paste or right clicking is hard to catch. It will adjust as soon as you click, type or move on to the element in the form.

  13. Chris the Developer

    Good work, but it doesn’t behave in Chrome 2. It seems that, for all of the examples, focus grows the text area (without typing any text). And the first example grows with each character that I type, as opposed to each new line. The max height parameters seem to work though :)

  14. ie7 can’t run

  15. Nice one, I like it.
    How about an “hiding the extra lines”-option, when the focus is somewhere else, with a little signal sign that shows the “collapsed” state.

  16. Graham McNicoll

    @Chris the Developer – I have fixed the Chrome bug. It seems that Chrome returns a different result for getScrollSize() than everyone else, safari included.

    @Tim, thats a good idea, I’ll see if I can add that easily.

  17. Graham McNicoll

    @Dick: works fine for me in IE7.

  18. Michael

    With each new letter in Safari, the textarea grows. Is this a Safari bug?

  19. Maybe I’m missing something but I downloaded the demo (http://github.com/Auz/Flext) and demo.html seems to be referencing the wrong js files??

  20. Andris

    Wonderful. The only autogrow plugin that can have a sinle line at the beginning. Do you intend to do a jQuery version too? Or the description of the technique you use. Thanks.

  21. Michael

    Sorry to say this doesn’t work in Version 4.0.4 (5531.21.10) on OS 10.5.8– same bug as reported by the other Michael above.

  22. Michael

    Actually it does work in Safari and I’m a dolt. Sorry.

  23. @Michael: I have the same issue. What did you do to fix this behaviour?

  24. Floris

    @Michael: Same bug here. On click, on keyup and on change the textarea grows. It seems like a safari bug indeed. To make sure it wasn’t the script I build my own textarea-grow class, but it also happens there.

    Jult like Markus, I’m also curious how you fixed it?

  25. mike

    I actually just finished writing a function to do this in my own code and ran into the same chrome bug. It doesn’t seem to be fixed on your demo page. Is it fixed?

  26. kali

    Hi David, Can you add the Shrink Functionality too for me please

  27. Hey thanks for this man, works great and saved me a bunch of time.

  28. Thomas

    Hey thanks for this great plugin!

    I tested it with different browsers and as Michael already mentioned, with each new letter in Safari, the textarea grows.

    Has anyone been able to fix this behaviour?


Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Making Data Management Easy with Transpose

    One problem with data collection is that we all want capture to be quick and we all want data to be organized -- but there's seldom a utility that allows both. Evernote allows note-taking but it can lose its structure...and no one wants...

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...