in ASP.NET

Tips/Tricks – How to control MaxLength of Multiline TextBox in ASP.NET 1.1?

Problem : The users can enter as much charaters as he wants in Multiline Textbox even MaxLength of this textbox is set to a particular value. Obviously, this is a bug of ASP.NET.

Details of problem : When the TextMode property of textbox is set to Multiline, the MaxLength property wont be handled in controlling the maximum length of users inputs.

maxlength-of-textbox-1.jpg

Demo Download

Steps to reproduce this issue (for those who doesn’t know that problem)

  1. Download Sample file
  2. Set “Problem.aspx” page as a startup page (There are two textboxes in this page. One is Multiline textbox (TextBox1.TextMode = Multiline) and another textbox is singleline textbox (TextBox2.TextMode = SingleLine). The MaxLength of Both textboxes are 10. )
  3. Run the project
  4. Type something more than 10 characters in both textboxes
    Observe: You can type as many characters as you wants in TextBox1 (1st Textbox) but not in Textbox2 (2nd Textbox)

Solution ~

This problem can be solved by using Javascript to track how many characters typed in textbox. If the length of characters are over limited number (max number) then we can simply ignore what the user type by returning “false” in javascript function.

Step #1. Put the following function in your page.

<script language="javascript">
function textboxMultilineMaxNumber(txt,maxLen){
try{
if(txt.value.length > (maxLen-1))return false;
}catch(e){
}
}
</script>

Step #2. Put the JS function in onkeypress event of Textbox.

&lt;asp:textbox id="TextBox1" runat="server" Width="232px" TextMode="MultiLine" Height="48px" style="Z-INDEX: 104; LEFT: 136px; TOP: 336px"
onkeypress=<strong>"return textboxMultilineMaxNumber(this,10)"</strong>></asp:textbox>

Run the sample

  1. Set “Solution.aspx” as startpage in the demo project that you just download.
  2. Run the project
  3. Type something more than 10 characters
    Observe: Both textboxes won’t let you type if the characters that you type are more than 10 as its defined.

Leave a Reply

28 Comments

  1. >>Don’t forget: Javascript can be disabled, so validate the user input always on the server side!

    ya.. good point.. thanks. man..

  2. I wouldn’t say that “Obviously, this is a bug of ASP.NET”. Actually I believe this is being handled properly by ASP.NET.

    MultiLIne texboxes are rendered as a TEXTAREA to the client. There is no maxlength property on a TEXTAREA. See the spec here: http://www.w3.org/TR/html4/interact/forms.html#h-17.7

    The single line textboxes are rendered as an INPUT element which does have a maxlength property. See here: http://www.w3.org/TR/html4/interact/forms.html#h-17.4

    So what’s really happening when you change the TexMode property of the asp:textbox control is you are changing what gets rendered to the client. While I think the proper result is taking place I believe that MS should make it a little more obvious what is happening by maybe blanking out the maxlength property when multiline is selected.

  3. Hi Avenger069,

    Thanks for your comment and links. Avenger069
    Yeah. MS should do something about it. If they are not able to disable MaxLength property of ASP.NET TextBox then they should create the seperated controls for single textbox and textarea..

    Hi Andrew,
    >>how about Cut & Paste?
    Let me check about this.. I will reply you asap..
    Thanks.

  4. Hi,

    instead of return false.
    use
    event.returnValue = false;
    works better

  5. thans for the wonderfull article.
    but this function wont work when cut & paste..
    plz help…………

  6. I had the problem that i could no more delete text if max len was reached. Also i saw that this script works not if i paste some text longer then the max into this textfield..

    So i changed the function as follows:

    function checkMaxLen(txt,maxLen) {
    try{
    if(txt.value.length > (maxLen-1)) {
    var cont = txt.value;
    txt.value = cont.substring(0,(maxLen -1));
    return false;
    };
    }catch(e){
    }
    }”;

    and i use the onkeyup instead of the onkeypressed – Event….

  7. I want to point out another problem with the first solution. Once you actually reach the max length, the textarea won’t accept any more input. Trouble is this includes backspace, delete and arrow buttons.

  8. i don’t quite agree with Avenger069 that it’s being handled properly by asp.net. it may be correct to say that a textarea does not have a maxlength property, but as asp.net developer, i care not whether microsoft renders my asp:textbox as an input, a textarea, or a banana, as long as it behaves properly. that’s the whole point of asp.net– the programmer does not (ideally) need to be concerned with how the server controls are rendered– asp.net is supposed to generate browser-specific client-side script. maxlength is an essential and obvious property, which should be available for both single-line and multiline textboxes.

  9. hi michael,

    I was searching for this script past 2 days in many site, now I got this script in your site, this is very helpful my project. That’s great. Thanks again.

    Regards,

    Sathian. K

  10. hi,
    using the try catch block in JavaScript is useful?That is i can get the exception?thereby helping me in the impossible task of debugging JavaScript for ASP2.0?

  11. Michael, very cool. I couldn’t use the regex solutions that are often suggested with the RegEx Validator Controls due to some strange postback business on my page. Leo makes the solution complete by adding cut&paste capability. I would suggest melding the two to one solution. One caveat: I don’t get taking maxlength-1. If the max length is 10 characters, then I want 10 characters max not 9.

  12. Unfortunate that I can paste in as much text as I want – which makes the necessity for server side validation very real.

  13. this works for me, only i quit out the sentence and i get it working in ASP.NET 3.5

    this my example…

  14. this is very nice article!! .Ii am facing problem in my textbox Previasly if i reach maxlenth of textbox text char i am not getting for removing and delete but after added you code i am getting properly!!!!

    Thanks Alot!!!!!!!!!!!

  15. this will not work if you copied and pasted over 12 letters, 12 -1 = 11 !!