Treehouse

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)

Usage

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.

Notes

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.

ydkjs-2.png

Recent Features

  • Introducing MooTools&nbsp;Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:

  • Write Better JavaScript with&nbsp;Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the...

  • CSS&nbsp;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...

Incredible Demos

  • MooTools Fun with&nbsp;Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can...

  • Detect DOM Node Insertions with JavaScript and CSS&nbsp;Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the...

  • Modal-Style Text Selection with&nbsp;Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs,...

Discussion

  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?

    Cheers

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

Use Code Editor