I currently have a character counter implemented on a visualforce page that includes a flow using this method.

I would like to use this same method to count characters on a field in another visualforce page. This page is a template for our payment processing site (powered by Linvio PaymentConnect.) In order to collect custom fields, we must identify them within the donation page record inside Salesforce. Linvio then uses its managed package components to display these fields. Here is an example of what it looks like when you create a custom field: enter image description here

My issue is occurring when trying to identify the field I'd like to count characters on. If I view the source code on the final visualforce, I'm given:

<td class="fieldColumn " id="siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:j_id124" colspan="1">

<input id="siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:customText" type="text" name="siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:customText" />


The code I'm using inside my visualforce to define the field is:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.CharCounter)}" type="text/javascript"></script>
    <script type="text/javascript">

            'maxChars': 65,
            'maxCharsWarning': 50


I've also tried the following id's in place of "0:customText" above with no success:

  • customText
  • siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:customText

Could someone please help me provide a character counter on this field. Thanks in advance.

PS: Here is my original post for a similar situation that was resolved

  • Be careful with hard coding Salesforce field id's. If you change that code, that ID you have hard coded can change. The selector I put in my other answer you referenced is a "Field ID Ends With" jquery selector. Render that page and inspect the field you want and see what the field ID ends with (right click on the field in Chrome and select Inspect Element). As of now, Salesforce typically puts the field ID you specify in html at the end of its auto generated ID's (you can see an example of this on the screenshot I posted in your other question) Jan 11, 2016 at 19:18
  • @cricketlang I think my issue is that this isn't a Salesforce field, it's being generated from within the app. I included a screen shot above to show how it must be done. I used the Inspect Element method you've suggested and it provided me with the ID I mentioned above: id="siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:2:customText". This ID does not cause the character counter to work.
    – BeckBeck
    Jan 11, 2016 at 19:35
  • Do you have some code somewhere that is injecting this element into the page after the DOM is rendered? If so, you'll need to do some tricky jquery code that waits for that element to be present before attempting to inject the character counter on the field. Jan 11, 2016 at 19:40
  • @cricketlang I think you've lost me. I know very little about API, jquery, etc. All I know is the page content is inject by <apex:insert name="body"/>. I think they may have to settle for something less dynamic. Thanks for all your help!
    – BeckBeck
    Jan 11, 2016 at 19:49
  • The answer to my question is yes, because what is happening is the page loads and jquery runs, but since you are adding in extra code after the page initially loads, jquery cant see the field you are trying to put the character counter on because its being injected AFTER jquery runs. You can try and see if using jquery .on() that can attach an event handler to elements that are inserted and run the code to inject the character counter that way, but my experience with it has mixed results. api.jquery.com/on Jan 11, 2016 at 19:58

1 Answer 1


It is probably easier to use a class selector:

<apex:inputField value="{!record.Field__c}" styleclass="max65Char">
    (function ($) {
        "use strict";
        $(function () {

If you have no way to change the markup, you would probably want a component specific selector (e.g. replace "max65Char" with "textArea"). To add it to a specific field, you would need a more thorough understanding of the incoming markup. If it is fairly static you could work with :nth-child(n) selectors and just set it so the nth field has a character maximum.

  • Unfortunately I do not have access to the input field codes. <apex:insert name="body"/> is replaced by the content fed to it through Linvio, including all input fields.
    – BeckBeck
    Jan 11, 2016 at 19:20
  • There are other ways but they require a more nuanced understanding than your OP provides. I listed out a couple possibilities.
    – Adrian Larson
    Jan 11, 2016 at 19:27
  • I had to do this once-- what I did was to query fields as [maxlength], then render a character count by using maxlength/3 for the number of characters supported.
    – sfdcfox
    Jan 11, 2016 at 21:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .