Introduction
ASP.NET provides textbox controls for data inputs and they are used vastly on the websites. TextMode='Multiline'
property of textbox
is used everywhere to input comments or any large data.
With my program assignment, I came across a problem to set MaxLength
for multiline textbox, i.e., after some specified length, the textbox should not accept any characters.
(Note: This solution was only tested & recommended for Internet Explorer (5+), Chrome & Firefox.)
Details
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
.
Finally, I was able to find a solution and wanted to share it with you all.
This example requires just very basic knowledge of JavaScript, so don’t be scared. I promise this will be one of the easiest JavaScripts that can solve a complex problem.
Add the following to your Multiline
box in aspx page:
<asp:TextBox Rows="5" Columns="80" ID="txtCommentsForSearch"
onkeyDown="return checkTextAreaMaxLength(this,event,'10');"
onblur="checkLength(this, '10')" TextMode="multiLine"
CssClass="textArea" runat="server"> </asp:TextBox>
*txtCommentsForSearch
-This is the ASP.NET control that is having multiline property set.
I have used MaxLength='1999'
, 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 it can be picked from parameters of JavaScript method.
In new browser versions, MaxLength
of multiline textbox is not accessible in JavaScript, so it's good to assign the required maxlength
in JavaScript method calls.
Add the following to your JavaScript file:
function checkTextAreaMaxLength(textBox, e, length) {
var mLen = length;
var maxLength = parseInt(mLen);
if (!checkSpecialKeys(e)) {
if (textBox.value.length > maxLength - 1) {
if (window.event)
{
e.returnValue = false;
return false;
}
else
e.preventDefault();
}
}
}
function checkSpecialKeys(e) {
if (e.keyCode != 9 && e.keyCode != 8 && e.keyCode != 46 &&
e.keyCode != 35 && e.keyCode != 36 && e.keyCode != 37 &&
e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40)
return false;
else
return true;
}
function checkLength(textBox, length) {
var mLen = length;
var maxLength = parseInt(mLen);
if (textBox.value.length > maxLength) {
textBox.value = textBox.value.substring(0, maxLength);
}
}
Note: This implementation is written just to provide a basic and quick help in JavaScript. Nowdays Jquery is preferred and has more easy ways to do things. I myself have moved to Jquery since the past few years. I will post the similar article in Jquery too if anyone is interested.