Limit amount of input in a field
Have you ever created a form with a field on it that relies on the user entering a "short description" and then had that nagging feeling, knowing that they can enter as much text as they like? This script will help.
The field below has been limited to 125 characters. Try typing more than that and see what happens:
All you need then is to place calls to it in the onKepUp and onKeyDown events for a field.
<textarea name="message" onKeyDown="textCounter(this.form.message, 125);" onKeyUp="textCounter(this.form.message, 125);"></textarea>
Note: If you want to include the field that has the number of characters remaining as well, take a look at the source to this page.
Also note that, as with most solutions, there are the loop-holes. This method does not stop the user from pasting a load of text in to the field by right-clicking and selecting Paste. Thus, bypassing the onKeyUp/Down events. You still need validation if the restriction is anything more than advisory.
Just great!!!!
Hello,
This tip is very useful!!! I had tried to find in other sites but this really works as I need!!! Thanks a lot. Laiz
Reply
To get around the Cut'n'Paste anaomoly ...
You can also add the call to the onMouseOutEvent, but obviously it will truncate whatever someone has pasted to the field
Reply
You rock, Jake!
My customer wanted to limit the number of characters entered for two fields. My first idea was to include "xx character limit" as part of the field label and use @Left in the field Input Translation. This tip is way better and I really like the feature showing how many characters are remaining.
I need to check out your Amazon Wishlist. I owe you for this tip and the "Keeping Your Boss Happy" tip.
Reply
Limit amount of input in a field
CRAP. Anyone can cut and paste an unlimited number of characters in the textbox. This code gives a sense of false security to those who use it.
Reply
Re: Limit amount of input in a field
DITTO here ... does not work in IE6 or Firefox .... ????????????
Reply
Show the rest of this thread
more explanation
I would really like to try this out.can u explain it more as im new to notes.like where to call the function and how? where should i place the <textarea> tag that u have mentioned.Please do reply to this as soon as possible.I would be thankful to u.
waiting for ur reply. Karuna.
Reply
any usage limitations
do you have any restrictions for use?
Reply
Re: any usage limitations
In what way?
Reply
Show the rest of this thread
Shorter is better
As this article obviously still catches some attention, I feel intitled to propose a small improvement:
textCounter(this, 125) works the same as textCounter(this.form.message, 125), saving you an immense amount of typing. ;-)
Reply