Text Box Characters Counter (IE, Opera, FireFox, & Safari)
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 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
- 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
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.