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)
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.
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 :)
Uh, it doesn’t shrink back? :P
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?
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?
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.
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?
Great plugin David!
The smoothness when increasing size is fantastic.
:)
Got a jQuery verion for it xD?
@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.
@Graham Thanks, that definitely works.
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?
Can this be adapted for something like fckeditor?
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.
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 :)
ie7 can’t run
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.
@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.
@Dick: works fine for me in IE7.
With each new letter in Safari, the textarea grows. Is this a Safari bug?
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??
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.
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.
Actually it does work in Safari and I’m a dolt. Sorry.
@Michael: I have the same issue. What did you do to fix this behaviour?
@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?
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?
Hi David, Can you add the Shrink Functionality too for me please
Hey thanks for this man, works great and saved me a bunch of time.
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