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.
Steps to reproduce this issue (for those who doesn’t know that problem)
- Download Sample file
- 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. )
- Run the project
- 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.
<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
- Set “Solution.aspx” as startpage in the demo project that you just download.
- Run the project
- 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.
Christian López Espínola said
am April 5 2007 @ 10:34 pm
Don’t forget: Javascript can be disabled, so validate the user input always on the server side!
a n n i e said
am April 6 2007 @ 12:53 am
wow
you’re so smart
i don’t know all of this stuff >O
Michael Sync said
am April 6 2007 @ 3:03 am
>>Don’t forget: Javascript can be disabled, so validate the user input always on the server side!
ya.. good point.. thanks. man..
Ashish said
am April 6 2007 @ 12:40 pm
added your link on my blog, add mine plz and also leave message if possible
http://best-tweaks.blogspot.com
thnx
Avenger069 said
am April 12 2007 @ 5:48 pm
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.
Andrew said
am April 17 2007 @ 6:34 am
Good, but how about Cut & Paste?
Michael Sync said
am April 18 2007 @ 3:11 am
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.
Amit said
am May 22 2007 @ 11:10 am
Hi,
instead of return false.
use
event.returnValue = false;
works better
Michael Sync said
am May 22 2007 @ 1:56 pm
thanks. I’ll try to test it.
Thanks again. Amit.
shobhit said
am June 12 2007 @ 5:32 am
thans for the wonderfull article.
but this function wont work when cut & paste..
plz help…………
Michael Sync said
am June 12 2007 @ 6:59 am
what errs are you getting??
Leo said
am July 12 2007 @ 4:29 pm
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….
JDS said
am September 13 2007 @ 12:37 pm
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.
Nisha said
am October 9 2007 @ 1:12 pm
Thanks! it works. i stuck with this point. thanks again.
johny why said
am May 9 2008 @ 6:59 am
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.