Character count / limit for InputTextArea in Visualforce pages

7:27 PM



Credits:  http://www.jqeasy.com/

In some cases, you might want to display a character count to notify the user that they can enter only a certain number of characters in  a text box in a Visualforce page.







There is a javascript file that you need to use to achieve the above behavior. The file was downloaded from jqeasy.com, i uploaded the file here in case you are not able to locate the file.

https://drive.google.com/file/d/0B5FQvDdE4z0PZU9JdC1mVk1BU28/view?usp=sharing&resourcekey=0-rI8WqomT9R9kZACQz_7RHw

STEP 1:

Download the file at https://drive.google.com/file/d/0B5FQvDdE4z0PZU9JdC1mVk1BU28/view?usp=sharing&resourcekey=0-rI8WqomT9R9kZACQz_7RHw and upload it into Static Resources. Let's say we name the file as "CharCounter".

STEP 2:

Create a Visualforce Page with the code below.




Analyzing the code:

If you check the code, you could see that we have the 'styleclass' attribute specified for the inputtextarea's.

And this styleclass name is used in the document.ready() function to specify the character limits. You could use the 'id' attribute as well, but make sure you reference id's using the $Component notation.

Share This Story

Tags: ,

5 comments

  1. AnonymousAugust 6, 2013 at 6:58 PM

    Love this. Works like a charm. Thanks!

    ReplyDelete
  2. anupamaJuly 28, 2015 at 11:54 AM

    Please share the visuaforce page code

    ReplyDelete
  3. AnonymousDecember 13, 2015 at 10:27 PM

    Thanks mate.
    This saved me hours of work.

    ReplyDelete
  4. AnonymousDecember 16, 2015 at 11:23 PM

    How to implement it in Lightning.

    Thanks

    ReplyDelete
  5. AnonymousMarch 12, 2018 at 7:36 PM

    Hi there, this really helped me a lot. Thank you!

    I have one question though, I am currently testing it on my visualforce page and it working as expected but when I tried to apply it on a textarea which is rerendered it stopped working... Do you have any idea on how to fix it?

    I've inspect the page and it seems this portion of the code went missing after it gets rerendered.

    "Characters: 0/210"

    Please let me know if you have any workaround for this.

    Thank you!

    ReplyDelete