UvumiTools TextArea 1.0.2

A basic textarea with a couple extra features, built with the Mootools Javascript Framework.
UvumiTools TextArea - UvumiTools Textarea example
  1 Screenshot
UvumiTools Textarea is a basic textarea with a couple extra features, built with the Mootools Javascript Framework. The project doesn't have any WYSIWG formatting features, because we like to keep things simple. So it's just a basic 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.

Main features:

  • 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.
  • 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.

last updated on:
October 2nd, 2008, 14:01 GMT
license type:
MIT/X Consortium License 
developed by:
Uvumi LLC
ROOT \ Internet \ HTTP (WWW)
UvumiTools TextArea
Download Button

In a hurry? Add it to your Download Basket!

user rating



Rate it!
What's New in This Release:
  • Fixed bug in Opera Browser, improved functionality in IE.
read full changelog

Add your review!