Saturday 10 October, 2009

How to control maxlength of multiline textbox in aspnet

This is known issue in ASP.NET Standard Text box control when set its TextMode="MultiLine" the MaxLength property does not work.

There is a workaround to accomplish this using two ways :
1. RegularExpressionValidator : Following is the markup that will restrict the text box to maximum of 300 characters.
<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Height="100px"
Width="320"></asp:TextBox> 
<asp:RegularExpressionValidator
ID="regComments" runat="server" ControlToValidate="txtComments"
ValidationExpression="^[\s\S]{0,500}$" ErrorMessage="Maximum 300 characters are allowed in comments box." Text="Maximum 300 characters are allowed in comments
box." > 
</asp:RegularExpressionValidator>

2.By JavaScript :
The MaxLength property of textbox control works fine if Multiline mode is not set, but if TextMode='Multiline' is set in aspx page then this property is of no use and user can input any number of characters inspite of setting maxlength.
Single line textboxes render as an HTML input tag - which supports a max
length.

The Multiline Textbox, renders as an HTML TextArea which doesn't support a
length property.

So, one workaround is to roll your own by calling a JavaScript function that
checks the length of the text entered. The function gets called on every
keypress and denies further data entry when the max length is reached. Of
course the JavaScript function needs to ignore some keys. This one should
work.

This example requires just very basic knowledge of java script so don’t be scared I promise this will be one of the easiest java scripts that can solve a complex problem.

Add the following to your Multiline box in aspx page:
<asp:TextBox Rows="5" Columns="80" ID="txtCommentsForSearch" MaxLength='500' onkeyDown="checkTextAreaMaxLength(this,event,'500');"  TextMode="multiLine" runat="server"> </asp:TextBox>
        

*txtCommentsForSearch-This is asp.net control that is having multiline property set

I have used MaxLength='500', same property you have to use in underlying javascript file also. I have also passed this length to the calling javascript method, so that in case the MaxLength is not accessible then can be picked from parameters of javascript method.

Add the following to your javascript file:
function checkTextAreaMaxLength(textBox,e, length)
{
    
        var mLen = textBox["MaxLength"];
        if(null==mLen)
            mLen=length;
        
        var maxLength = parseInt(mLen);
        if(!checkSpecialKeys(e))
        {
         if(textBox.value.length > maxLength-1)
         {
            if(window.event)//IE
              e.returnValue = false;
            else//Firefox
                e.preventDefault();
         }
    }   
}

function checkSpecialKeys(e)
{
    if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40)
        return false;
    else
        return true;
} 

No comments:

Post a Comment