function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
DannyK89DannyK89 

InputField Character limit

Is there a way to display how many characters the user has left like it does on a detail page. The issue I am running into is that when I try to save the data I put into the field the page tells me that I am over the character count. However I don't know by how much. So I am forced to guess. Thanks. 

Ispita_NavatarIspita_Navatar

Hi,

Yes you can achieve this through the JavaScript.

  • For that you have to write a JavaScript method which will discard all the character after the maxlength.
  • Another way is that if you can use  the <apex:inputtext>  instead of <apex:inputfield> here you have the option of Maxlength so you can directly put the integer value here and it will not accept value more than that. 
  • Also in case you want to display the number of characters left  as a counter try the following:-
    <form name="myForm"
    action="/articles/articles/javascript/dynamictextareacounter.asp?ID=<%=siteID%>"
    method="post">
    <b>One Function to Count and Limit Multiple Form Text Areas</b><br>
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
    onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>
    <br>
    <input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
    characters left
    <br>
    <textarea name="message2" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
    onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
    <br>
    <input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
    characters left
    <br>
    <input type="Submit" name="Submit" value="Submit">
    <br>
    </form>

     Here is the javascript function:-

<SCRIPT LANGUAGE="JavaScript">
<!-- Dynamic Version by: Nannette Thacker -->
<!-- http://www.shiningstar.net -->
<!-- Original by :  Ronnie T. Moore -->
<!-- Web Site:  The JavaScript Source -->
<!-- Use one function for multiple text areas on a page -->
<!-- Limit the number of characters per textarea -->
<!-- Begin
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
//  End -->
</script>

 Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.

DannyK89DannyK89

It worked well. I was wondering however, I noticed that you hard coded the limit into the code. Is there a way to get the limit from the field that the input tag is attached to? Also when I use the detail page it seems to count hard enters in the strings as two characters. Is there a way to do that in the JavaScript?

DannyK89DannyK89

OK I found a way to make spaces count for two. But I am Having trouble getting the java script to work. I still would like to know if there is a way to get the limit value from the field possible using schema. Also I am having trouble getting the Javascript to work on my visualforce page. It does not seem to link to my inputField. I can't seem to find the issue maybe you can see what I am doing wrong. 

 

Visual Force Page:

 

<apex:page tabStyle="TAP_Candidate__c" controller="InterviewFormController" >
<SCRIPT LANGUAGE="JavaScript">
<!-- Dynamic Version by: Nannette Thacker -->
<!-- http://www.shiningstar.net -->
<!-- Original by :  Ronnie T. Moore -->
<!-- Web Site:  The JavaScript Source -->
<!-- Use one function for multiple text areas on a page -->
<!-- Limit the number of characters per textarea -->
function textCounter(field,cntfield,maxlimit) {
var strTemp = "";
var strCharCounter = 0;
for(var i = 0; i < document.getElementById(field).value.length; i++){
    var strChar = document.getElementById(field).value.substring(i, i + 1);
    
    if(strChar == '\n'){
        strCharCounter += 2;
    }
    else{
        strCharCounter ++;
    }
}
if (strCharCounter > maxlimit) // if too long...trim it!
document.getElementById(field).value = document.getElementById(field).value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
document.getElementById(cntfield).value = maxlimit - strCharCounter;
}
</script>
    <a name="top"></a>
<style>
        .redtext { 
            color:red; 
            font-size: 18pt;
            text-align:left;
        }
        .red { 
            color:red;
            font-size: 12pt;
            font-weight:bold;
            text-align:left;
        }
    </style>
    <apex:form id="myForm">
    <apex:pageBlock id="pBlock" title="Interview Form">
    <apex:messages styleClass="redtext"/>
    <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!SaveCand}"/>
    </apex:pageBlockButtons>
        <apex:pageBlockSection id="BaseInfo" title="Basic Info">
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Name"/>
                <apex:inputField id="Name" value="{!TAP.Name}">
                    <apex:actionSupport event="onchange" action="{!autoSave}" ReRender="Name"/>
                </apex:inputField>
            </apex:pageBlockSectionItem>
            <br/>
            <apex:pageBlockSectionItem id="Date">
                <apex:outputLabel value="Date of Interview"/>
                <apex:inputField value="{!TAP.Interview_Date__c}">
                    <apex:actionSupport event="onchange" action="{!autoSave}" ReRender="Date"/>
                </apex:inputField>
            </apex:pageBlockSectionItem>
            <br/>
            <apex:inputField id="By" value="{!TAP.Interviewed_By__c}">
                    <apex:actionSupport event="onchange" action="{!autoSave}" ReRender="By"/>
                </apex:inputField>
            <br/>
            <apex:outputPanel style="font-weight:bold">
                <apex:outputText value="Is there anything I can tell you about Solving IT?"/>
            </apex:outputPanel>
        </apex:pageBlockSection>
        <apex:pageBlockSection id="ResWalk" title="Resumé Walk-Through">
            <apex:outputPanel style="font-weight:bold">
            <apex:outputText value="Things to ask about:"/>
            <ul>
                <li>Education</li>
                <li>Job history</li>
                <li>Reasons for leaving previous jobs</li>
                <li>Things they liked or disliked about previous jobs</li>
            </ul>
            <apex:outputText value="Specific Questions:"/>
            <ul>
                <li>Ask about upward movement and job history</li>
                <li>How current is the candidate’s resumé?</li>
            </ul>
            </apex:outputPanel>
            <br/>
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Resume Review"/>
                <apex:inputField id="Resume" value="{!TAP.Resume_Review__c}" onkeydown="textCounter('{!$Component.Resume}','{!$Component.ResLimit}',5000);" 
                    onkeyup="textCounter('{!$Component.Resume}','{!$Component.ResLimit}',5000);" style="width:800px; height:500px;">
                </apex:inputField>
            </apex:pageBlockSectionItem>
            <br/>
            <apex:outputText id="ResLimit" value="5000"/>
            <br/>

 

cherrysbluecherrysblue

Thanks . I tried. It works. However, I want to change the limit to 25 charaters. However, whatever I changed, it didn't work. Can some one help me with that ? 

DannyK89DannyK89

When you say it does not work what do you mean? Can you elaborate on the issue. Is there an error that shows up, or does it just plan not work?

cherrysbluecherrysblue

It didn't have the limit of 25. The change didn't work. 

DannyK89DannyK89

Could you post your code. This may shine some line on your problem.

cherrysbluecherrysblue
<SCRIPT LANGUAGE="JavaScript">
function limitinputfiled(limitField, 25) {
    if (limitField.value.length > 25) {
        limitField.value = limitField.value.substring(0, 25);
    } 
}
</script>
DannyK89DannyK89

Try using document.getElementById(limitField) with the Id from the field that you are using.

 

So it should look something like this. Also if this does not work could you show me your visualforce code. That might help too.

 

<script LANGUAGE="JavaScript">
    function limitfieldvalue(field){
        if(document.getElementById(field).value.length > 25)}
            document.getElementById(field).value  = document.getElementById(field).value.substring(0, 25);
        }
    }
</script>

<apex:inputText Id="fieldId" value = "{!Field}" 
onkeydown="limitfieldvalue('{!$Component.fieldId}');"
onkeyup="limitfieldvalue('{!$Component.fieldId}');">

 

cherrysbluecherrysblue

not working correctly 

DannyK89DannyK89

Could you please post your whole visualforce page or possible just the field you are using this javascript on and the javascript.

cherrysbluecherrysblue

<apex:outputPanel id="mainPanel">
<table class="fullWidthTable">
<tr>
<td>
&nbsp;
</td>
<td class="rightAlign">
<apex:commandButton action="{!saveAndExit}" value="Save Draft" onclick="return confirm('Would you like to save your current draft of this application and exit?');"/>&nbsp;
<apex:commandButton action="{!prevSection}" value="Previous Section"/>&nbsp;
<apex:commandButton action="{!nextSection}" value="Next Section"/>
</td>
</tr></table>


<apex:outputPanel id="overviewPanel" rendered="{!currentWrapper.tabType == 'overview'}">
<h2>{!currentWrapper.tabName}</h2>
<apex:outputText value="{!fundingApp.Funding_Opportunity__r.Description__c}" escape="false"/>
<apex:outputPanel rendered="{!NOT(ISBLANK(fundingApp.Funding_Opportunity__r.Funding_Eligibility__c))}">
<h2>Eligibilitya</h2>
<apex:outputText value="{!fundingApp.Funding_Opportunity__r.Funding_Eligibility__c}" escape="false"/>
</apex:outputPanel>
<hr/><br/>
<p>Please provide the following general information regarding your application:</p><br/>
<apex:panelGrid columns="2" columnClasses="labelColumn, fieldColumn">
<apex:outputPanel >
<b>Amount Requested</b>
&nbsp;(Max&nbsp;<apex:outputField value="{!fundingApp.Funding_Opportunity__r.Funding_Maximum__c}"/>)
</apex:outputPanel>
<apex:inputField value="{!fundingApp.Funding_Requested__c}"/>
<b>Application Title - University Applicants use Technology Name, Licensee Applicants use Company Name (25 characters max. Please note that the system will omit any characters above this maximum)
</b>
<apex:inputField value="{!fundingApp.Description__c}" styleClass="writtenAnswerMultiLine"/>

<SCRIPT LANGUAGE="JavaScript">
function limitinputfiled(limitField, 25) {
if (limitField.value.length > 25) {
limitField.value = limitField.value.substring(0, 25);
}
}
</script>
</apex:panelgrid>
<h3>Primary Applicant Address</h3>
<apex:panelGrid columns="2" columnClasses="labelColumn, fieldColumn">
<apex:outputText value="Stored Addresses:"/>
<apex:actionRegion >
<apex:selectList size="1" value="{!selectedAddressRecord}" title="Select a stored address from the list to auto-fill the form below.">
<apex:actionSupport event="onchange" action="{!fillRecipientAddrFields}" rerender="rstreet, rcity, rstate, rzip, rcountry" />
<apex:selectOptions value="{!addressOptions}" />
</apex:selectList>
</apex:actionRegion>

DannyK89DannyK89

this is my mistake. I mistyped my code.

 

Here is the correct version of the code that I use. Try this out.

 

<apex:page standardController="Contact">
<SCRIPT LANGUAGE="JavaScript">
    function limitfieldvalue(field){
        if(document.getElementById(field).value.length > 25){
            document.getElementById(field).value = document.getElementById(field).value.substring(0, 25);
        }
    }
</script>
<apex:form >
<apex:inputField Id="fieldId" value="{!Contact.LastName}" onkeydown="limitfieldvalue('{!$Component.fieldId}');" onkeyup="limitfieldvalue('{!$Component.fieldId}');"/>
</apex:form>
</apex:page>

 

cherrysbluecherrysblue

Thanks a lot 

DannyK89DannyK89

Sure, as long as it worked I'm happy.

Brian E MillerBrian E Miller
Hi Everyone,

Since Winter '14, VF pages have HTML5 tag support.  Using the html-maxlength attribute is the way to go:
<apex:page standardController="Contact" docType="html-5.0">
  <apex:form>
    <apex:inputField value="{!Contact.LastName}" html-maxlength="25" />
  </apex:form>
</apex:page>
Make sure your apex:page has the docType="html-5.0" attribute