UvumiTools Textarea Plugin
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 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.
- 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.
- 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.
- Animated: Helps your site feel more sturdy and professional.
What you'll need :
- A textarea: Sure, the script could generate one for you, but uh, we're trying to make non-obtrusive scripts here.
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:
- Fx.Tween (since version 1.1)
- 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.
- 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 ( ). Your back-end script must replace "\t" with four or five " ". 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.
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:
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-textarea.css"/>
The script needs at least one textarea. We are going to put this textarea in a form.
but the strict doctype requires them -->
<textarea id="text-input" name="text" rows="6" cols="12" > </textarea>
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:
This form contains two textareas,
but we use the selector option to apply the plugin only to
the one with id 'text-input1'.
We also set the minimum size to 100px and maximum to 500px.
minSize : 100,
maxSize : 500
This form contains three textareas,
We want the first to allow 512 characters,
the second one should allow 1024,
but the third should have no limit.
We declare three instances, with different selectors by class.
maxChar : 512
maxChar : 1024
maxChar : 0
- 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.