function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

restrict type extra characters after reaching the field max length

Is there any way to stop the user entering required number of characters when it reaches its field size. For ex if the field lenght is 10 then stop showing him characters after 10 th character even if he tries to enter any character.

Best Answer chosen by Admin (Salesforce Developers) 
LakshmanLakshman

Ok, the change should be as simple as below:

 

<apex:page controller="ATestCase">
<script>
function checkLimit(limitField, limitCount, limitNum)
{
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>
<apex:form >
<apex:pageBlock title="Text Limit">
<apex:pageBlockSection columns="1" >

<apex:inputTextarea value="{!myVar}" onkeydown="checkLimit(this,this.form.countdown,10);"  
onkeyup="checkLimit(this,this.form.countdown,10);" onchange="checkLimit(this,this.form.countdown,10);"/>

<font size="1">(Maximum characters: 10)<br/>
You have <input readonly="true" type="text" name="countdown" size="3" value="10"/> characters left.</font>
</apex:pageBlockSection> 
</apex:pageBlock>
</apex:form>
</apex:page>

Now the above sample code will also handle Right Click and Paste (if greater than 10) because of onchange event. Let me know if it works for you.

 

Regards,

Lakshman

All Answers

kkr.devkkr.dev

http://www.mediacollege.com/internet/javascript/form/limit-characters.html
Starz26Starz26

You could use the onKeypress event to check the size of the field then remove the character if the size is = to the limit.....
LakshmanLakshman

This is how it would be in salesforce:

 

Apex Class/Controller:

public class ATestCase{
public String myVar{get;set;}
}

 

Visulaforce page:

<apex:page controller="ATestCase">
<script>
function checkLimit(limitField, limitCount, limitNum)
{
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>
<apex:form >
<apex:pageBlock title="Text Limit">
<apex:pageBlockSection columns="1" >

<apex:inputText value="{!myVar}"  maxlength="10" onkeydown="checkLimit(this,this.form.countdown,10);"  
onkeyup="checkLimit(this,this.form.countdown,10);"/>

<font size="1">(Maximum characters: 10)<br/>
You have <input readonly="true" type="text" name="countdown" size="3" value="10"/> characters left.</font>
</apex:pageBlockSection> 
</apex:pageBlock>
</apex:form>
</apex:page>

 The above code is tested and works fine.

 

Regards,

Lakshman
nasknask

Thanks for all your Reply. But my problem i need to show this property in Textarea. So anybody treid this applyin on text area as there is no attribute as max lenght in that apex tag.
LakshmanLakshman

Ok, the change should be as simple as below:

 

<apex:page controller="ATestCase">
<script>
function checkLimit(limitField, limitCount, limitNum)
{
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>
<apex:form >
<apex:pageBlock title="Text Limit">
<apex:pageBlockSection columns="1" >

<apex:inputTextarea value="{!myVar}" onkeydown="checkLimit(this,this.form.countdown,10);"  
onkeyup="checkLimit(this,this.form.countdown,10);" onchange="checkLimit(this,this.form.countdown,10);"/>

<font size="1">(Maximum characters: 10)<br/>
You have <input readonly="true" type="text" name="countdown" size="3" value="10"/> characters left.</font>
</apex:pageBlockSection> 
</apex:pageBlock>
</apex:form>
</apex:page>

Now the above sample code will also handle Right Click and Paste (if greater than 10) because of onchange event. Let me know if it works for you.

 

Regards,

Lakshman

This was selected as the best answer
nasknask

Thanks lakshman. That was a good work around  :) I had change my id of the text area field in my code, but it worked like wonder. Thanks for your time and help. Its very helpfull and usefull bit of code.
LakshmanLakshman

I am glad that it helped you :)

 

Regards,

Lakshman
Shivani Singhal 9Shivani Singhal 9
Now <apex:inputtextArea> component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated <textarea> tag. You can add arbitrary attributes to many Visualforce components that are “passed through” to the rendered HTML. To add a pass-through attribute, prefix the attribute with “html-” and set the attribute value as normal. Every attribute that begins with “html-” is passed through to the resulting HTML, with the “html-” removed.
Hence we can use the following tag to restrict user input to 10 characters in textArea  
<apex:inputTextarea cols="20" rows="5" html-maxlength="10" label="Comment" value="{!myVar}" required="true"/>

Hope this helps !