Click here to Skip to main content
Click here to Skip to main content

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

, 16 Nov 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
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.


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.

Using the code

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Globalization;
using System.Threading;

namespace CustomServerControls
    [ToolboxData("<{0}:TextArea runat="server"></{0}:TextArea>")]
    public class TextArea : TextBox
        public override TextBoxMode TextMode
                return TextBoxMode.MultiLine;

        protected override void OnPreRender(EventArgs e)
            if (MaxLength > 0)
                if (!Page.ClientScript.IsClientScriptIncludeRegistered("TextArea"))
                this.Attributes.Add("onkeyup", "LimitInput(this)");
                this.Attributes.Add("onbeforepaste", "doBeforePaste(this)");
                this.Attributes.Add("onpaste", "doPaste(this)");
                this.Attributes.Add("onmousemove", "LimitInput(this)");
                this.Attributes.Add("maxLength", this.MaxLength.ToString());

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.

To show the working TextArea control, I prepared the following HTML:

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="csc" Namespace="CustomServerControls" %> 

<html xmlns="" >
<head runat="server">
    <title>TextArea Custom Server Control with MaxLength property</title>
    <form id="form1" runat="server">
        <csc:TextArea id="TextArea" runat="server" 
            MaxLength="105" Rows="10" 

In the above HTML, I register the custom control with the web page by using the following line:

<%@ Register TagPrefix="csc" Namespace="CustomServerControls" %>

If you don't want to add the above registration line on each page that you use the TextArea control, you may add the following statement in the system.web section of the web.config file:

    <add tagPrefix="csc" namespace="CustomServerControls"></add>

I added the control on the page as:

<csc:TextArea id="TextArea" runat="server" MaxLength="105" Rows="10" Width="300px">

Let's compare the rendered output of a multiline textbox control and our text area control:

The rendered output of a standard multiple line ASP.NET TextBox is:

<textarea name="TextArea" id="TextArea" rows="10" cols="20" style="width:300px;" ></textarea>

The rendered output of our TextArea custom server control is:

<textarea name="TextArea" rows="10" cols="20" id="TextArea"
  onkeypress="LimitInput(this)" onbeforepaste="doBeforePaste(this)"
  onpaste="doPaste(this)" onmousemove="LimitInput(this)" maxLength="105"

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.

function doBeforePaste(control)
   maxLength = control.attributes["maxLength"].value;
       event.returnValue = false;
function doPaste(control)
   maxLength = control.attributes["maxLength"].value;
   value = control.value;
        event.returnValue = false;
        maxLength = parseInt(maxLength);
        var o = control.document.selection.createRange();
        var iInsertLength = maxLength - value.length + o.text.length;
        var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
        o.text = sData;
function LimitInput(control)
    if(control.value.length >


  • Nov 10, 2007 - The onkeypress JavaScript event handler is changed with the onkeyup JavaScript event handler. (You may check the reason at KeyPress, KeyDown, KeyUp - The Difference Between JavaScript Key Events)
  • Nov 9, 2007 - Instead of using the 'ResolveClientUrl' method to access textarea.js which may cause a problem in the case of URL rewriting, the 'ResolveUrl' method is used.
  • The code is tested on Firefox, IE 6.0, and IE 7.0.

      Try the online demo of the extended ASP.NET multiline TextBox control that limits the number of characters entered. You may find more articles about ASP.NET, JavaScript, and C# on my blog.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

blogging developer
Web Developer
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.

Comments and Discussions

BugMy vote of 5 [modified] Pinmemberzhangtai19-Sep-12 19:40 
GeneralMy vote of 5 Pinmembermanoj kumar choubey17-Feb-12 21:55 
GeneralWell Done Pinmembernorchr14-Apr-10 12:56 
GeneralObject expected error while using this customer control into update panel [modified] PinmemberRakesh Bhavsar22-Feb-10 1:34 
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.
Do you have any idea about it. Please tell us!

-- Modified Monday, February 22, 2010 7:07 AM

GeneralNice Control Pinmemberthatraja19-Jan-10 4:14 
QuestionDatabinding issues? Pinmembermminnich28-Dec-09 6:27 
GeneralSet MaxLength from CodeBehind PinmemberKen Robert Andersen8-May-09 0:34 
GeneralThanks PinmemberGrettir Strong6-Feb-09 8:34 
GeneralNice Solution PinmemberAlpha_Jujster2-Feb-09 4:02 
Generalvalidation not working quite right PinmemberHalfHuman7-Jan-08 2:13 
GeneralHi Pinmembersrinath g nath24-Nov-07 9:01 
QuestionWhy not just use a Regular Expression? Pinmemberorengold21-Nov-07 8:13 
AnswerRe: Why not just use a Regular Expression? Pinmemberblogging developer21-Nov-07 11:03 
GeneralRe: Why not just use a Regular Expression? Pinmemberorengold21-Nov-07 11:52 
GeneralFirefox counts characters different from IE (AFAIK) [modified] PinmemberMark Cranness19-Nov-07 15:37 
Generalonkeypress PinmemberPaulius9-Nov-07 3:10 
GeneralRe: onkeypress Pinmemberblogging developer9-Nov-07 23:53 
QuestionResolveClientUrl problem? Pinmembertvj088-Nov-07 7:14 
AnswerRe: ResolveClientUrl problem? Pinmemberblogging developer8-Nov-07 7:23 
GeneralGood Pinmemberrajantawate1(http// 12:10 
Generaldesigner.vb Pinmemberaurand20-Sep-07 12:35 
GeneralRe: designer.vb Pinmemberblogging developer20-Sep-07 22:42 
GeneralRe: designer.vb Pinmemberaurand21-Sep-07 3:19 
GeneralRe: designer.vb Pinmemberblogging developer21-Sep-07 3:26 
GeneralRe: designer.vb Pinmemberaurand21-Sep-07 3:27 
QuestionIs there any posible answer? PinmemberMahdi Yousefi18-Sep-07 21:17 
AnswerRe: Is there any posible answer? Pinmemberblogging developer18-Sep-07 21:24 
GeneralNice article and responses to questions! PinmemberKevin Jensen9-Sep-07 5:15 
GeneralRe: Nice article and responses to questions! Pinmemberblogging developer9-Sep-07 7:34 
GeneralFor regular TEXTAREA HTML tag Pinmemberaadavis4-Sep-07 8:28 
GeneralRe: For regular TEXTAREA HTML tag Pinmemberblogging developer4-Sep-07 11:58 
GeneralRe: For regular TEXTAREA HTML tag Pinmemberaadavis4-Sep-07 14:00 
Generalonbeforepaste, onpaste events are not necessary PinmemberJustin Keyes3-Sep-07 18:15 
GeneralRe: onbeforepaste, onpaste events are not necessary Pinmemberblogging developer3-Sep-07 21:27 
GeneralGood Idea Pinmembermerlin98131-Aug-07 5:35 
GeneralRe: Good Idea [modified] Pinmemberblogging developer31-Aug-07 7:47 
GeneralRe: Good Idea PinmemberGevorg17-Sep-07 6:48 
GeneralRe: Good Idea Pinmemberblogging developer17-Sep-07 7:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150326.1 | Last Updated 16 Nov 2007
Article Copyright 2007 by blogging developer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid