How do I get the counter to stop the input of characters in a text area

  • Profile Image
    Asked on May 13, 2011 at 05:18 PM

    I have entered alimit of 20 characters as a trail to a text area.  The counter works but the problem is that it allows more than 20 characters.

    Would someone kindly tell me how I get this to work in Jotform.  I can't attach the form as it is a .html and it won't accept it.

  • Profile Image
    Answered on May 13, 2011 at 11:43 PM

    Hi Helen

    Presently, the only way I can think of to achieve that functionality, would be to embed the full source of the form into your website's page and add these JavaScript scripts to the head of the page and in the form's text area respectively. You will need to edit the values of the onKeyDown and onKeyUp attribute/value pairs as shown (note the areas highlighted in red):



    (These code segments above were put on two lines only because they would run outside of this post's container if put on just one line. When you use them in your source, put them on one line in the textarea's opening tag. Also, do NOT include the other parts of the code.)

    Please let us know if this solution achieves the desired result and if we can assist you with any other issue related to your form(s).



    ~ Wayne

    EDIT: In case there are other scripts on the page with which the code to go in the head might conflict, place that code into a separate JavaScript (.js) file and link to it from within the head. In other words, if the file is named limit_input.js and it is located in the same folder as the page, place this code in the head of the page.

  • Profile Image
    Answered on May 14, 2011 at 06:04 PM

    Thank you for your reply.

    I am new to this.  I lookd to see where I could add the extra source code you suggested, but I don't have a website yet because I am still working on it.  I could not find a way to add the extra code without having a website.

    It looks as if the form set up within the program doesn't work.  Can you fix it to work once you select the number of characters/words and the limit number.

    I don't want to put it on a website until I get the pages working better.

    Is there a solution to hide the email address from scammers within the program?




  • Profile Image
    Answered on May 14, 2011 at 06:10 PM

    I had previous sent in a email to jotforum but my email was rejected.


  • Profile Image
    Answered on May 14, 2011 at 08:14 PM

    Hi again Helen

    The character limit problem and hiding email addresses from scammers are two separate issues that ought to be discussed in two separate threads. This thread deals with the character limit situation.

    It is not presently possible to use the solution I have provided without embedding the form's source in an existing page and making the changes previously alluded to. (Please see this example.)

    When you say that it looks like the form setup within the program "doesn't work", what exactly do you mean? I cloned the form, replaced your email address with my own and tested it. I didn't notice any problems. As expected, the form would not allow me to submit it with more than 20 characters in the textarea: the counter became highlighted when more than 20 characters were entered and if a submission was attempted with those extra characters in place, a warning stating "There are incomplete required fields. Please complete them." showed up to the right of the submit button. (Incidentally, that notice can be changed to suit your tastes in the "Preferences": Setup & Embed > Preferences > Advanced Settings > Edit Form Warnings).

    Once the extra characters in the textarea were removed, I was able to submit the form, saw the default "Thank You" page and received the notification of the submission in my email.

    Is your form performing differently in any way to what I have just explained?

  • Profile Image
    Answered on May 14, 2011 at 08:46 PM

    When I type in the text area of the form "Application/Enquiry Form" the counter doesn't count down and it didn't stop me from going over the limit.

    When I submitted it nothing at all happened.

  • Profile Image
    Answered on May 14, 2011 at 08:50 PM

     tried the Hivelogic's email obfuscation service


    but it didn't work either.


    I don't know what I am doing wrong.



  • Profile Image
    Answered on May 14, 2011 at 08:57 PM

    Okay, the fact that both of those solutions aren't working leads me to believe that JavaScript is not enabled in your browser. Which browser are you using?

  • Profile Image
    Answered on May 15, 2011 at 12:02 AM

    I don't know how to find out.  I have been checking all my other Javascripts through IE and they have worked.


  • Profile Image
    Answered on May 15, 2011 at 05:20 AM

    After just reviewing this thread, I noticed you stated in the first post that "the counter works..." but further down (four posts up) you state "the counter doesn't count down...". Was something edited on the form between the time of the first and second posts? The only other explanation I can think of was that in the first instance you tested the form at its URL ( and in the second, tested the form while it was embedded in a web page.

    Incidentally, I just tested that very form at its URL ( and the digits under the textarea counted up (not down) and when more than 20 characters were entered, the background of the numbers turned pink and its text became white as a warning. When I tried to submit the form with those extra characters, a warning (There are incomplete required fields. Please complete them) was displayed and the submission would not go through. In other words, your form performed as it should. (See screenshot.)

    Do you have other browsers on your system? If so, please use them to test the form and let us know if you experience the same issues.


    ~ Wayne

  • Profile Image
    Answered on May 15, 2011 at 04:51 PM

    Thank you.  I checked it out in your domain and it worked.  The trouble is it doesn't tell you what the problem is and I doubt if users would be aware that the extra characters were the problem.

    When I check it out in IE, Firefox, and Google chrome it doesn't work.

    Usually when I open html documents in IE it automatically activates my active X control and I have to accept it. 

  • Profile Image
    Answered on June 15, 2011 at 07:47 AM
    Hi Wayne,


    I made the changes as suggested and it worked perfectly.

    Note: I did try to set up a hover note for one textbox, but the note comes
    up a few inches to the right of the field, so it is cut off by another
    section of our site. It would be nice to redesign the hover notes so they
    appear closer to the actual textbox.


  • Profile Image
    Answered on June 15, 2011 at 09:13 AM

    Hi again Andrew

    Re: The original thread, I'm glad it worked out for you.

    As to the hover note issue, please see the solution provided by my colleague liyam in this thread. You would need to edit the code provided though. You can simplify the code as shown below:

    .form-description {

    This will position every hover text in the form in the same manner. However, if you wish to position the hover text differently for each field, you would need to edit liyam's code by subsituting the following ID's for #id_12:

    First Name: #id_3
    Last Name: #id_4
    Email: #id_5
    Phone: #id_6
    What do you need help with?: #id_7
    Please describe what you need: #id_8

    There may also need to be some adjustments made to the value of the right: 100px; declaration. (If using a top property, the value for that can also be changed to suit.)

    Incidentally, the First and Last Name fields can be combined into one Full Name field (Quick Tools menu).

    Since this post has totally morphed the original topic, if you need to further discuss issues related to the hover note or anything else unrelated to limiting inputs, please start a new thread and put its link in this thread, so that I can easily find it.


    As usual, should you require assistance on any other features of our product, please feel free to ask. Our team would be happy to help wherever we can.

    ~ Wayne

    P.S. The CSS code should be inserted in the Inject Custom CSS section of the Preferences: Setup & Embed > Preferences > Form Tools > Inject Custom CSS