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.
Here are some key features of "UvumiTools TextArea":
· 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.
· 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:
· 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.
· 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).
· 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:
· Animated: Helps your site feel more sturdy and professional.
· A textarea
· Mootools 1.2 only
· Mootools Dependencies
What's New in This Release: [ read full changelog ]
· Fixed bug in Opera Browser, improved functionality in IE.