logo

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:



characters left.

The JavaScript function required is:

<script type="text/JavaScript">
<!--
function textCounter(field, maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
}
-->
</script>


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.

Feedback

  1. 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

    • avatar
    • Andy McQuillen
    • Fri 28 Sep 2001

    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

    • avatar
    • Kurt Meyer
    • Fri 30 Jul 2004

    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.

  2. 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.

      • avatar
      • pc
      • Thu 10 Mar 2005

      Re: Limit amount of input in a field

      DITTO here ... does not work in IE6 or Firefox .... ????????????

      Hide the rest of this thread

        • avatar
        • Jake Howlett
        • Thu 10 Mar 2005

        Re: Limit amount of input in a field

        Should work now. I did a design update recenlty which removed the default Form from all articles. Back now.

        1. Re: Limit amount of input in a field

          Jake.... Very cool, but I'm having trouble implementing it.

          I have a hidden field, docDescription, on my main form. In my subform that displays on that main form, I've got the following in a ComputedText....

          "[<TEXTAREA NAME=\"docDescription\" ROWS=5, COLS=60 onKeyDown=\"textCounter(this.form.docDescription, 10);\" onKeyUp=\"textCounter(this.form.docDescription, 10);\" onMouseOut=\"textCounter(this.form.docDescription, 10);\" >"+docDescription+"</TEXTAREA>]"

          the textCounter function's in a javascript library in the db which is called by the main form.

          When I display the form and type in the textarea, textCounter() is called, but I get an error message that "field.value" is null or undefined. Any thoughts?

          1. Re: Limit amount of input in a field

            Sorry about that....

            the computed text contents, sans pass-thru html are....

            "<TEXTAREA NAME=\"docDescription\" ROWS=5, COLS=60 onKeyDown=\"textCounter(this.form.docDescription, 10);\" onKeyUp=\"textCounter(this.form.docDescription, 10);\" onMouseOut=\"textCounter(this.form.docDescription, 10);\" >"+docDescription+"</TEXTAREA>"

  3. 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.

    • avatar
    • j
    • Mon 25 Jul 2005

    any usage limitations

    do you have any restrictions for use?

      • avatar
      • Jake Howlett
      • Tue 26 Jul 2005

      Re: any usage limitations

      In what way?

      Show the rest of this thread

  4. 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. ;-)

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "Forms"

« Previous Article Next Article »
Using Query_String parameters   Stop double form submissions

About This Article

Author: Jake Howlett
Category: Forms
Hat Tip: Ronnie T. Moore
Keywords: input; length; limit;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »