Extending the ASP.NET multiline TextBox control to limit the number of characters entered

Developers use multiline TextBox controls in almost all web projects. Since the MaxLength property of a TextBox control does not work when the TextMode property is set to Multiline, we usually use Validator controls to validate the length.

Introduction

Developers use multiline TextBox controls in almost all web projects. Since the MaxLength property of a TextBox control does not work when the TextMode property is set to Multiline, we usually use Validator controls to validate the length. In this hands-on article, we are going to extend the TextBox control using JavaScript in order to limit the number of characters entered by the user to the length specified.

The code above creates a new TextArea custom server control by extending ASP.NET's TextBox control. By overriding the OnPreRender function, we include attributes to the HTML of the control. We add custom JavaScript and a property to pass MaxLength on the client side.

The JavaScript event handlers doBeforePaste and doPaste are only implemented in Internet Explorer. These event handlers are used to check the length of characters that are pasted by using a mouse in Internet Explorer. Unfortunately, the doBeforePaste and doPaste event handlers are not defined in other browsers and we cannot catch a mouse paste in browsers other than IE. Therefore, I added an onmousemove event handler in order to check the length of characters that are pasted by using a mouse after a mouse move. The onkeypress event handler handles the standard character input.

Share

About the Author

Blogging Developer is an accomplished project manager with more than 8 years of experience in web development, web strategy, e-commerce, and search engine optimization, specialized in object-oriented, multi-tiered design and analysis with hands-on experience in the complete life cycle of the implementation process including requirements analysis, prototyping, proof of concept, database design, interface implementation, testing, and maintenance.

Solid project management skills, expertise in leading and mentoring individuals to maximize levels of productivity, while forming cohesive team environments.

Hi,
This is a very nice article. This will working fine when I use this custom control in normal page or ascx. But when I used many nested ascx within that I registered this custom control within a update panel, then it will give me the jScript Object expected error!

I have resolve that issue when I modify my custom "MyTextArea" class as given below.
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyTextArea", _script, false);
where _script is used as inline script.

I have also tried to locate my java script function from .js file but give error like "could not load respective javascript", eventhough the path of the .js file is proper.
ScriptManager.RegisterClientScriptInclude(this,this.GetType(), "MyTextArea", ResolveUrl("~/js/textArea.js");
So, that I have to skip above line.

Again when I use "<asp:CustomValidator .... /> for check box, then it will not render the ClientValidationFunction="CheckIsAgree" and give jScript object expected error.

I needed to set the MaxLength property from Codebehind. Made possible with this change of OnPreRender method, which uses the programatically set value if existing, otherwise the MaxLength property from aspx:

Thanks for the, good work, your solution works well, i have tested it in IE and Firefox. I really like how your solution takes into account pasting data into multi-lined txt boxes. Keep up the good work.

As for Client side validation Vs server side validation. There are good pros and cons for each method, but the best would be a combination of both of them. However due my laziness the java script solution is my option, cause it is easier to apply

your article is quite usefull since M$ did not make the MaxLength functional for multiline textboxes.

i wanted to use your code and strated testing. however i discovered a bug. first i limited tehe 105 value to 10 so i could verify it easier. i noticed that i could actually insert one more character than the limit (106) if i used the tab to navigate. to test it even further i pasted a textbox and a button. when the user clicks the button the text would be copied from the your control to the textbox. as i tried i noticed that also the extra character was copied.

filxed the problem by using the "onblur" event instead of "onmousemove", which fires when the control loses focus so the char gets truncated.