Text Box Characters Counter (IE, Opera, FireFox, & 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 all browsers like IE, Opera, FireFox, Netscape or Safari.
Example
Example of displaying how many characters remain while filling data into a text box field
You have 255 characters remaining for your description...
Cut and Paste Code
Cut 'n' paste code for the above Example
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.
