Introduction
Basics of DHTML
IE vs Netscape

DHTML Effects
Drop Down Menus
Tip Boxes

DHTML Forms
Date Validation
Email Validation
Phone No. Validation
Text Box Char Counter
Reset with Image field
Check All check boxes

Text Box Characters Counter (IE, Opera & Safari)

In forms when using text boxes or text areas with limited character length (usually needed for forms that submit data to a database) it is always a good idea to tell the user how many characters they have remaining. This javascript snippet is especially useful for textarea fields since they can't be assigned a text limit in HTML but can be restricted using this code.

The following example shows how you can do this. This is a very simple and cute idea to help the user know exactly how many characters can be typed further. Do these small add-ons to your forms and they will look really professional. We recommend using this counter inside CMS solutions and custom built Admin Panels where your clients/visitors can be instructed to use IE/Opera or Safari. Alternately, to make the code cross browser compatible, you can make the span element into an input box with no background (so it looks like a span tag) and then it would work with the same code in Firefox and Netscape as well.

Example

Example of displaying how many characters remain while filling data into a text box field

You have 255 characters remaining for your description...

View Explanation of the Code

Cut and Paste Code

Cut 'n' paste code for the above Example

JavaScript Code

HTML Code

Note: You need to change the name of the myCounter field if you use multiple text boxes and also change the reference to it in the event onKeyUp for the respective boxes.

Explanation of the Code

The JavaScript code has two main functions:

Function taLimit is used for the Key Press event for the text box or text area. When a key is pressed this function checks if the total number of characters typed equals the limit allowed (value maxL defined in the javascript code). If the limit is reached then it return false thus not allowing any further key press event.
Function taCount is used for the Key Up event. We use this to change the value of the counter displayed and to truncate the excess characters if any (example if someone has cut and pasted the value into the field when we have allowed paste). To disable paste add the property onpaste="return false" to the field. We have used the inner text property of the span element to change the counter displayed.