Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
kannapapikannapapi 

count charcters across form

hi,
i need to count the characters from all the fields in visualforce page. currently i am able to count the characters from single field. can anyone help me to count the characters from all fields?

<script>
        var i;
        function ShowCharCount(myTA, maxSize, SizeLabel) {
                i=maxSize-myTA.value.length;
                document.getElementById(SizeLabel).innerHTML =  'Word Count: '+ i + ' Characters Left';
                i= maxSize; 
        }
</script>


<apex:inputField value="{!c.name__c}"
                    onchange="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onmousedown="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onkeyup="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onkeydown="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onclick="ShowCharCount(this, 2000, '{!$Component.myTASize}');" />

<apex:inputTextarea value="{!c.address__c}"
                   onchange="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onmousedown="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onkeyup="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onkeydown="ShowCharCount(this, 2000, '{!$Component.myTASize}');"
                    onclick="ShowCharCount(this, 2000, '{!$Component.myTASize}');"  />

<apex:outputPanel id="myTASize"></apex:outputPanel>
Best Answer chosen by kannapapi
SarfarajSarfaraj
Hi

Use this code,
<apex:page standardController="Account">
    <apex:includeScript value="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
(function($) {
    $.fn.extend( {
        limiter: function(limit, remaining, total) {
            $(this).on("keydown keyup focus", function() {
                setCount(this, remaining, total);
            });
            function setCount(src, remaining, total) {
                var charsCurrent = src.value.length;
                var chars = 0;
                $(".countTarget").each(function(index, value){chars += $(value).val().length});
                if (chars > limit) {
                    src.value = src.value.substr(0, (limit - chars + charsCurrent));
                    chars = limit;
                }
                remaining.html( limit - chars );
                total.html( chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);
$(document).ready(
    function()
    {
        var remaining = $("#charCountRemaining");
        var total = $("#charCountTotal");
        $(".countTarget").limiter(100, remaining, total);
    }
);
</script>
<apex:form >
    <apex:pageBlock >
        <apex:pageMessage severity="INFO">
            <apex:outputLabel >
                <span id="charCountRemaining"/> Remaining<br/>
                Total: <span id="charCountTotal"/>
            </apex:outputLabel>
        </apex:pageMessage>
        <apex:pageBlockSection >
             <apex:inputField value="{!Account.Name}" styleClass="countTarget"/>
             <apex:inputField value="{!Account.BillingStreet}" styleClass="countTarget"/>
             <apex:inputField value="{!Account.BillingCity}"/>
             <apex:inputField value="{!Account.BillingCountry}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

All Answers

Ramu_SFDCRamu_SFDC
I believe this can be done only if you have a temporary integer variables corresponding to each of the text fields available on the visualforce page on the controller that would get updated with the character length. Have a master integer field in the controller that would dynamically sum up all the integer field values.

You might have to use actionfunction or actionsupport with javascript in visualforce page to dynamically update these integer variables with the legth of the characters of each field.

hope this helps !!
SarfarajSarfaraj
Hi

Use this code. This is simpler than the single field,

<apex:page standardController="Account">
    <apex:includeScript value="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keydown keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var charsCurrent = src.value.length;
                var chars = 0;
                $("input[type='text'][id!='phSearchInput'], textarea").each(function(index, value){chars += $(value).val().length});
                if (chars > limit) {
                    src.value = src.value.substr(0, (limit - chars + charsCurrent));
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);
$(document).ready(
    function()
    {
        var label = $("#BillingStreetLabel");
        $("input[type='text'][id!='phSearchInput'], textarea").limiter(100, label);
    }
);
</script>
<apex:form >
    <apex:pageBlock >
        <apex:pageMessage severity="INFO"><apex:outputLabel for="BillingStreetInput">{!$ObjectType.Account.fields.BillingStreet.Label}<br/>
                <span id="BillingStreetLabel"/> Remaining</apex:outputLabel></apex:pageMessage>
        <apex:pageBlockSection >
             <apex:inputField value="{!Account.Name}"/>
             <apex:inputField value="{!Account.BillingStreet}"/>
             <apex:inputField value="{!Account.BillingCity}"/>
             <apex:inputField value="{!Account.BillingCountry}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
SarfarajSarfaraj
Oops. This line is not required,
{!$ObjectType.Account.fields.BillingStreet.Label}<br/>
kannapapikannapapi
Thanks Akram,

      i want to count characters only from name and billing street only. so how to exclude billing city and billing country from this?
SarfarajSarfaraj
Hi

Use this code,
<apex:page standardController="Account">
    <apex:includeScript value="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
(function($) {
    $.fn.extend( {
        limiter: function(limit, remaining, total) {
            $(this).on("keydown keyup focus", function() {
                setCount(this, remaining, total);
            });
            function setCount(src, remaining, total) {
                var charsCurrent = src.value.length;
                var chars = 0;
                $(".countTarget").each(function(index, value){chars += $(value).val().length});
                if (chars > limit) {
                    src.value = src.value.substr(0, (limit - chars + charsCurrent));
                    chars = limit;
                }
                remaining.html( limit - chars );
                total.html( chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);
$(document).ready(
    function()
    {
        var remaining = $("#charCountRemaining");
        var total = $("#charCountTotal");
        $(".countTarget").limiter(100, remaining, total);
    }
);
</script>
<apex:form >
    <apex:pageBlock >
        <apex:pageMessage severity="INFO">
            <apex:outputLabel >
                <span id="charCountRemaining"/> Remaining<br/>
                Total: <span id="charCountTotal"/>
            </apex:outputLabel>
        </apex:pageMessage>
        <apex:pageBlockSection >
             <apex:inputField value="{!Account.Name}" styleClass="countTarget"/>
             <apex:inputField value="{!Account.BillingStreet}" styleClass="countTarget"/>
             <apex:inputField value="{!Account.BillingCity}"/>
             <apex:inputField value="{!Account.BillingCountry}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>


This was selected as the best answer
kannapapikannapapi
Thanks Akram..It's working fine...
kannapapikannapapi
Hi Akram,
 
                Can we count  the character for rich text area fields also? if it is it would be really helpful for us.
SarfarajSarfaraj
<apex:page standardController="Account">
    <apex:includeScript value="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
(function($) {
    $.fn.extend( {
        limiter: function(limit, allTarget, remaining, total) {
            $(this).on("keydown keyup focus", function() {
                setCount(this, allTarget, remaining, total);
            });
            function setBodyEvents()
            {
                var body = $(allTarget).find("iframe").contents().find("body[set!='true']");
                if(body.length != 0)
                {
                    body.on("keydown keyup focus", function() {
                        setCount(this, allTarget, remaining, total);
                    });
                    body.attr("set", "true");
                }
                setTimeout(setBodyEvents, 5000);
            }
            setTimeout(setBodyEvents, 5000);
            function setCount(src, allTarget, remaining, total) {
                var charsCurrent = 0;
                if($(src).prop("tagName") == "BODY")
                {
                    charsCurrent = $(src).text().length;
                }
                else
                    charsCurrent = $(src).val().length;
                var chars = 0;
                allTarget.each(function(index, value){
                    if($(value).prop("tagName") == "TD")
                    {
                        var body = $(value).find("iframe").contents().find("body");
                        if(body.prop("tagName") == "BODY")
                            chars += $(body).text().length;
                    }
                    else
                        chars += $(value).val().length
                });
                if (chars > limit) {
                    if($(src).prop("tagName") == "BODY")
                        $(src).text($(src).text().substr(0, (limit - chars + charsCurrent)));
                    else
                        $(src).val($(src).val().substr(0, (limit - chars + charsCurrent)));
                    chars = limit;
                }
                remaining.html( limit - chars );
                total.html( chars );
            }
            //$(this).focus();
        }
    });
})(jQuery);
$(document).ready(
    function()
    {
        var richElementIds = [];
        richElementIds.push("{!$Component.form.pageBlock.pageBlockSection.pageBlockSectionItem.descriptionLabel}");
        richElementIds.push("{!$Component.form.pageBlock.pageBlockSection.pageBlockSectionItem2.descriptionLabel2}");
        var richElements = [];
        $(richElementIds).each(function(index, value)
        {
            richElements.push($(document.getElementById(value)).parent().next()[0]);
        });
        
        var remaining = $("#charCountRemaining");
        var total = $("#charCountTotal");
        var allTarget = $(".countTarget").add($(richElements));
        allTarget.limiter(100, allTarget, remaining, total);
    }
);
</script>
<apex:form id="form">
    <apex:pageBlock id="pageBlock">
        <apex:pageMessage severity="INFO">
            <apex:outputLabel >
                <span id="charCountRemaining"/> Remaining<br/>
                Total: <span id="charCountTotal"/>
            </apex:outputLabel>
        </apex:pageMessage>
        <apex:pageBlockSection id="pageBlockSection">
             <apex:inputField value="{!Account.Name}" styleClass="countTarget"/>
             <apex:inputField value="{!Account.BillingStreet}" styleClass="countTarget"/>
             <apex:inputField value="{!Account.BillingCity}"/>
             <apex:inputField value="{!Account.BillingCountry}"/>
             <apex:pageBlockSectionItem id="pageBlockSectionItem" >
                 <apex:outputLabel for="description" id="descriptionLabel">{!$ObjectType.Account.fields.Description__c.Label}</apex:outputLabel>
                 <apex:inputField value="{!Account.Description__c}" id="description"/>
             </apex:pageBlockSectionItem>
             <apex:pageBlockSectionItem id="pageBlockSectionItem2" >
                 <apex:outputLabel for="description2" id="descriptionLabel2">{!$ObjectType.Account.fields.Description2__c.Label}</apex:outputLabel>
                 <apex:inputField value="{!Account.Description2__c}" id="description2"/>
             </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
Akash v 6Akash v 6
I came asscross similiar requirement and tried to follow your code but its not working...Can you just take a Richtext filed and count the remaning  charcters on mouse or keyboard evnt..

--
Thnaks,
Akash