MultiLine TextBox Length Property Problem And Solution

In this article i will try to explain the problem when using the textBox as Multiline and set the MaxLength property , then the MaxLength property did not work. When an ASP.NET TextBox control is set to MultiLine mode, it is rendered as a TextArea HTML element. TextArea element do not support 'MaxLength' attribute, and therefore the TextBox won't render this attribute in MultiLine mode. It won't give you any warning or throw an error, but quietly ignore this property.
For the example i have created a TextBox and set the TextMode to the MultiLine and also set the MaxLength of the TextBox to 100 character.

Problem:

When you see the generated html of the page, you can see clearly that there is not MaxLength property for the TextBox. You can see that other properties are rendered but only property which we need is MaxLength is missing. Due to this you can enter as many character as you can in the textBox or you can say textArea control.In the Example i have the problem form which show you the real problem. You can see the html of the page by right clicking with mouse and then clicking the View Source of the page.

Solution:

Now let us turn to the solution of the problem. What you have to do is to set the properties of the textBox like TextMode, MaxLength in the property window. You set the properties of the MultiLine textBox normally as you do for the single line textBox.And then add the following javascript in the aspx page in the script tag.

function CharacterCounter(currentControl)
{
var lblCharacterCounter= document.getElementById("<%=lblCharacterCounter.ClientID %>");
var MaxLength=<%=txtValue.MaxLength %>;
lblCharacterCounter.innerText= currentControl.value.length;
if(currentControl.value.length > MaxLength-1)
return false;
else
return true;
}

function LimitPaste(targetField, sourceEvent)
{
var clipboardText;
var resultantLength;
var currentFieldLength;
var pasteAllowed = true;
var MaxLength=<%=txtValue.MaxLength %>;

// Get the current and maximum field length
currentFieldLength = parseInt(targetField.value.length);

clipboardText = window.clipboardData.getData("Text");
resultantLength = currentFieldLength + clipboardText.length ;

if ( resultantLength > MaxLength+1)
{
pasteAllowed = false;
}  

lblCharacterCounter.innerText= targetField.value.length;
sourceEvent.returnValue = pasteAllowed;
return (pasteAllowed);
}

Above is the simple code for the keypress and paste event for the JavaScript. what is common in the both function is that i have get the MaxLength of the Multiline textBox by executing the server script and store the value in a variable for further use.
In the characterCounter function which is simple one , what i did in the characterCounter function is i have pass the control itself as parameter and then i have place the if else condition to return either true or false depending on the result whether the textBox value is greater then the MaxLength property or not. If it is not greater then the MaxLength then return true mean to accept the character and if the value is greater the the MaxLength then return false mean not to accept the character.
In the LimitPaste function i have pass two parameter one is the control calling the function, second is the event which is fired. This function is also simple one, let me explain you the main functionality of the function. what is important to be noted in the function is the clipboardText = window.clipboardData.getData("Text"); in this line i have get the get the Text which is selected from window.clipboardData.getData("Text") and store it in the local variable. In the next line i have store sum of the textBox value length and length of the clipboardText. Then i have place the if condition to check the if the resultantLength is greater then the MaxLength value if yes then assign false to the pasteAllowed flag.

At the end here is the code you can bind the onkeypress and onpaste event for the textBox in the cod behind file.I have use the VB.net hope you can easily convert it into C# or your favorite language.

txtValue.Attributes.Add("onkeypress", "return CharacterCounter(this);")
txtValue.Attributes.Add("onpaste", "return LimitPaste(this, event);")

Hope this will solve you problem if you have any question please ask me.You can download source code from by Clicking here