UvumiTools Textarea Plugin

The UvumiTools Textarea is a basic textarea with a couple extra features, built with the Mootools Javascript Framework. It doesn't have any WYSIWG formatting features, because we like to keep things simple. So it's just a basic <textarea> element, the kind you would find in, say, a comment form or a feedback page. It features a fancy remaining countdown of how many characters are still available, which isn't really anything new, we just use a nifty progress-style indicator instead of simply a number.

We feel that having a visual indicator of how much space is remaining in the textarea makes it easier for web users to plan what they are going to write, which helps provide an more pleasing overall experience at your web site. Remove some text from the above example and start typing to see just how it works, or paste a huge blob into the empty textarea. Works well, doesn't it?

Finally, we really like Apple's Safari browser feature that lets you resize textareas. As a web designer you may not want a huge textarea taking up half of the page, but you also don't want to restrict the user to a little tiny box for typing comments or descriptions. At first we added small buttons to manually grow and shrink the textarea, but then we decided those buttons were not even necessary since we could just make the textarea auto-adjust to its content. Sure, it's a gadget, but it's built in, so it just works without any hassles on your part.

• Requires no Javascript knowledge: Simply call the script with the default settings--it's one line you code that you can copy/past from the How To section. The script automagically applies to all textareas in your document.
• Requires no HTML preparation: The script will build everything around the textareas, doing the heavy lifting for you. You don't need any special containers or specific parent elements. Just the textareas.
• Non-obtrusive: In this case it would have been harder to make it obtrusive than not--users who disable javascript (which includes search engines) will still see the textarea.
• Cross-Browser Compatible: Tested in the major browsers: Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3. All on Windows systems. We didn't get a chance to test on Mac or Linux. If anyone encounters any problems in other browsers/operating systems, please let us know. We only support real browsers -- No need to email us with IE4 or AOL issues. We know about that, and frankly we just don't care.
• Shows more than numbers: As you type, the progress bar gives you visual feedback of how many characters can still be typed. Visual cues are better understood by users, and subtle usabilty improvements can greatly increase a user's odds of returning to your site.
• Cut extra characters: Once the character limit has been reached, any additional characters typed will be removed. This even works with pasted text. But do not fully relly on this feature. Any client javascript disabled (like bots) can send as much text as they want, so always double-check the input on the server side.
• NEW! Character limit and counter can be disabled: Until now, the only way to get rid of the counter was to hide it and to set a high limit. Not anymore. Now you can set the character limit to 0 and the counter automagically disappears and there is no more limit. It just becomes an auto-growing textarea.
• Allow tabs: If you hit the tab key on a normal textarea to insert an indent, the browser will focus the next input. It's the default behaviour. Our textarea intercepts the tab key event, and insert a regular tab instead. Then it will be your job when you render the text to make the tabs appear, but at least they can be typed in, to start with. You can disable this option if you are not interested in it, or if you do not want to upset users who are expecting the tab key to change focus to the next form element.
• Expandable: Textarea grows to avoid scrolling bars when users enter more text than the input element can display.
• Affect all textareas (or not): Only one instance of the class is necessy to transform all textareas. If you don't want the plugin to affect every textarea, or if you want two texteras with different settings (like different character budgets), you can use CSS selecting rules on initialization to define which element should be affected.
• Can contain text on initialization: If a textarea already contains some text when the script is called, the counter and height will be immediatly adjusted to this content (and not only when you start typing, like most character-counting scripts out there).
• Options++: We thought you might want to change a few things, like the number of characters allowed or how big the textarea can be grown. Options like this are easy, just have a look at the examples in the How To section.
• Cutomizable with CSS: Most of the style for the new elements is not hard coded in the javascript. You can personalize it with the included CSS template.
• Animated: Helps your site feel more sturdy and professional.

What you'll need :

• A website where you can include javascripts: Sounds obvious, but some platforms don't allow users to include <script> tags. If you are your own webmaster, you're set.
• A textarea: Sure, the script could generate one for you, but uh, we're trying to make non-obtrusive scripts here.
• Mootools 1.2 only: To use this plugin you'll need Mootools 1.2, but if you are already using another javascript framework like Prototype or JQuery, you may have to decide which one you want to keep because those frameworks were not designed to work together, and they ofen conflict with each other. And yes, you actually do need version 1.2 of Mootools. If you are already using a previous version of Mootools then the gallery will not work unless you upgrade. Sure, upgrading is a hassle, but trust us, it's worth it in the long run.

• Mootools Dependencies: If your website already contains some Mootools 1.2 stuff (from this wesite or elsewhere), that's even better because you can use a single Mootools library for everything. All you'll need is the gallery script, and to make sure your library contains the following classes:

  • Core
    • Core
    • Browser
  • Native
    • Array
    • Function
    • Number
    • String
    • Hash
    • Event
  • Class
    • Class
    • Class.Extra
  • Element
    • Element
    • Element.Event
    • Element.Style
    • Element.Dimensions
  • Utilities
    • Selector
    • DomReady
  • Fx
    • Fx
    • Fx.CSS
    • Fx.Tween (since version 1.1)
  • Plugins
    • Fx.Elements

Initialization

Arguments

• Options: an object that will allow you to modify some of the default properties. Like the name says, options are optional. For the live example on top of this page, no argument was passed.

Options

• selector: string defining a CSS rule that will select the textareas to be transformed. The default value is textarea, which simply selects all the textareas in the document.
• maxChar: The number of charcters allowed per textarea. Default is 1000. NEW! Set to 0 or false to remove the limit and disable the counter.
• resizeDuration: The duration, in milliseconds, of the animation when the textarea is being resized. This value is also used for the progress animation. The default is 500 milliseconds.
• minSize: Defines the minimum height the texteara can be reduced to. Once it reaches this size and the content text gets shorter, nothing will happen. If you leave this option to the default value false, the initial textarea's height will be used as a minimum.
• (Deprecated) maxSize : No more maxSize since version 1.1. It was causing one of the big bugs that were making this textbox unusable in production. The only solution we came with was to discard this option. Don't worry, if you still pass one, it will not break it, it will simply be ignored.
• catchTab: Defines whether or not the textarea should override the browser default behavior for the tab key and insert a tab in the text. Default is true, but if you're not going to support it on the back-end, you should disable it. Since tabs are not rendered in HTML, you can only simulate them with non-breaking spaces (&nbsp;). Your back-end script must replace "\t" with four or five "&nbsp;". If you don't feel like doing this, it's better to keep the browser's default behavior and set the catchTab option to false.
• classPrefix: Each new element generated by the script is assigned a CSS class for easy styling. We don't want to restrict your website to only one style though. Yes, you could create a different css file for each style and load them dynamically, but there is a simpler way. By giving different prefixes to those CSS classes you can create several themes. If you have a red and a blue theme, you can set the option to 'red' in one case, and to 'blue' in the other. As a reslut, the new elements can be stylized using the following CSS clases : redControls, redButton, redProgress, redProgressBar, redCounter in one case and blueControls, blueButton... in the other. The default value is tb, corresponding to the CSS template you can download with the example.

How To

First, you simply import the files provided in the zip archive into your document. While you can insert <script> tags anywhere, we recommend you put them inside the <head> tag:

The script needs at least one textarea. We are going to put this textarea in a form.

Then we are ready to execute the script. We just add the following code in our document.

If we put everything together, we get something like this:

Technically, that should work.

Finally, you can use optional parameters when you initialize the plugin:

Another example:

• Wait and see: All the known bugs have been fixed in the most recent update. We don't say there aren't anymore, we just say that if there are any, we haven't not found them yet.

• 20081211 - Version 1.1.0: Fixed two big bugs. We are surprised no one complained about those, because they become kind of obvious when you start using this textarea in a real situation.
  First one was a big issue when writing some HTML in the textarea : to evaluate the new size of the textarea, we were pasting the content into a dummy element, positioned offscreen. If you put any HTML here, it get rendered. Not only the new size is completly wrong, but it's also not very safe because you can paste a <script> tag and execute its content. Yes, it was pretty much an invitation to Cross-Site Scripting. But it's fixed now, it's totally safe and the new height evaluation is more accurate.
  
  The second bug happened when you reached the maximum height of the textarea. The textarea's overflow property had to be switched from 'hidden' to 'auto', causing the cursor to automatically jump to the end of the text. If you are not already typing at the end of your text when this happens, but editing something in the middle instead, the cursor jumping thing is very annoying,especially if you don't notice it immediatly. We tried to fix that the best we could but without success. In the end, we decided to remove the maximum height option because it was causing more problems than anything.
  Oh, and we made the whole character limit/counter optional. Checkout the doc above.
• 20080724 - Version 1.0.2: Fixed bug in Opera Browser, improved functionality in IE.
• 20080722 - Version 1.0.1: Added support for detection of right-click paste, which was initially overlooked. Thanks to Adam for the suggestion!
• 20080720 - Version 1.0.0: Initial release. Stable with Mootools 1.2.