You can download the sources from here

ASP.NET TextBox has an integer attribute “MaxLength”which corresponds to html text input’s property with the same name. It works perfectly when the textbox is single line, normal input type “text”.

But when we want to work in a multiline box, such as an e-mail message or sending and SMS, we want to limit it in the same way and what happens? We see that generated control is a “textarea” and it doesn’t support maximum length! Gee!

Now of course we can use Regular Expression validators to validate and tell at the client side, but we don’t want to just tell! We want to prevent it exceeding the predefined size too!

That’s why I came up with this Ajax Control Toolkit extender that I called TextboxLimitExtender. We just give it the MultiLine text area to operate on, and the maximum length. I also added an option to show how many characters left on a text control of your choice. The extender contains a server side method to do the double check on server side.

Here is a screenshot of what you will expect to get at the end of it:

Picture 1. Extender in action

How to Use It

After adding TextboxLimiterExtender and Ajax Control Toolkit assemblies to your project as references, add the following at the beginning of your page or user control that you want to use the TextboxLimitExtender:

<%@ Register Assembly=”TextboxLimitExtender” 

Namespace=”TextboxLimitExtender” TagPrefix=”cc1″ %>

Of course, we have to be sure that we have a script manager:

<asp:ScriptManager ID=”sm” runat=”server” />

Now let’s assume that our target textbox is defined like the following:

<asp:TextBox ID=”limitedTextBox” runat=”server” TextMode=”MultiLine” />

And just beneath it we have our static text and a label to show how many characters left:

You have <asp:Label ID=”charsLeftLabel” runat=”server” ForeColor=”Red” /> 

chars left.

Now the moment of truth: with these controls extender goes like this:

<cc1:TextboxLimitExtender ID=”TextboxLimitExtender1″ runat=”server” 

MaxLength=”50″ TargetControlID=”limitedTextBox” 

TargetCountTextControlId=”charsLeftTextBox”>    

        </cc1:TextboxLimitExtender>

How it Works

It handles the every key hit and checks if the checkbox length exceeded the maximum length or not. If it didn’t, then does nothing. If it did, then it cancels the event so the offending chars never get typed.

In addition, we need to handle copy & paste behaviors to prevent them from happening for the same reasons above.

Implementation

Server Side

We will have 2 properties, one for the ID of the control to write how many characters left, and another one to keep maximum length.

Here is TextboxLimiterExtender.cs that writes the injects values for the script:

   1: [Designer(typeof(TextboxLimitExtenderDesigner))]

   2: [ClientScriptResource(“TextboxLimitExtender.TextboxLimitExtenderBehavior”,

   3:     “TextboxLimitExtender.TextboxLimitExtenderBehavior.js”)]

   4: [TargetControlType(typeof(ITextControl))]

   5: public class TextboxLimitExtender : ExtenderControlBase

   6: {

   7:     // TODO: Add your property accessors here.

   8:     //

   9:     [ExtenderControlProperty]

  10:     [DefaultValue(“”)]

  11:     [IDReferenceProperty(typeof(ITextControl))]

  12:     public string TargetCountTextControlId

  13:     {

  14:         get

  15:         {

  16:             return GetPropertyValue(“TargetCountTextControlId”, string.Empty);

  17:         }

  18:         set

  19:         {

  20:             SetPropertyValue(“TargetCountTextControlId”, value);

  21:         }

  22:     }

  23:

  24:     [ExtenderControlProperty]

  25:     [DefaultValue(“1000″)]

  26:     public int MaxLength

  27:     {

  28:         get

  29:         {

  30:             return GetPropertyValue<int>(“MaxLength”, 0);

  31:         }

  32:         set

  33:         {

  34:             SetPropertyValue<int>(“MaxLength”, value);

  35:         }

  36:     }

  37:

  38:     /// <summary>

  39:     /// Validates the textbox against the maximum number.

  40:     /// </summary>

  41:     /// <returns></returns>

  42:     public bool Validate()

  43:     {

  44:         return ((ITextControl)this.TargetControl).Text.Length <= MaxLength;

  45:     }

  46:

  47: }

As you can see the type of target control and the control to write target count are type of ITextControl interface. This is an interface implemented by every control that has Text property, so you can swap between Textbox and Labels. Here is a screenshot that writes the content to a TextBox instead of a label:

Picture 2. Textbox Limiter outputting to a Textbox instead of a Label

Client Side

In the behaviour file we will define the variables that are coming from the server side and the events to achieve the behaviour needed. The code below shows how to create the behaviour . We are also initialising the methods that we are going to use here:

   1: TextboxLimitExtender.TextboxLimitExtenderBehavior = function(element) {

   2:     TextboxLimitExtender.TextboxLimitExtenderBehavior.initializeBase(this, [element]);

   3:

   4:     // initializing property values

   5:     //

   6:     this._TargetCountTextControlId = null;

   7:     this._MaxLength = 1000;

   8:

   9: //    //initializing handlers

  10:     this._onKeyPressHandler = null;

  11:     this._onBeforePasteHandler = null;

  12:     this._onPasteHandler = null;

  13:     this._onKeyDownHandler = null;

  14:     this._onKeyUpHandler = null;

  15: }

The rest goes as the same with a standard implementation of an Ajax Control Toolkit Extender, but I’ll show some important methods that are listed above.

RefreshCountTextbox method calculates the characters left and updates the count on the targetCountTextControl .

   1: _refreshCountTextBox: function() {

   2:

   3:         var control = this.get_element();

   4:         var maxLength = this.get_MaxLength();

   5:         var tbId = this.get_TargetCountTextControlId();

   6:         var countTextBox;

   7:         //var countMode = this.

   8:         if (tbId) {

   9:             countTextBox = $get(tbId);

  10:         }

  11:         else

  12:             return; //nowhere to write.

  13:

  14:         var innerTextEnabled = (document.getElementsByTagName(“body”)[0].innerText !=

  15: undefined) ? true : false;

  16:

  17:         if (countTextBox)

  18:         {

  19:

  20:             if(innerTextEnabled)

  21:             {

  22:                 countTextBox.innerText = maxLength - control.value.length;

  23:             }

  24:             else

  25:             {

  26:                 countTextBox.textContent = maxLength - control.value.length;

  27:             }

  28:         }

On pasting, things get a bit more interesting. We need to cancel default pasting in order to perform our own one, so we handle onbeforepasting:

   1: _onBeforePaste: function(e) {

   2:         //cancel default behaviour

   3:         if (e) {

   4:             e.preventDefault();

   5:         }

   6:         else {

   7:             event.returnValue = false;

   8:         }

   9:

  10:         this._refreshCountTextBox();

  11:     },

And now that we cancelled the paste, we have the responsibility to reach to what user wanted to copy and tailor it until it doesn’t exceed max length. If it exceeds, than the trailing bits won’t be in the box:

   1: _onPaste: function(e) {

   2:         var control = this.get_element();

   3:         var maxLength = this.get_MaxLength();

   4:         //cancel default behaviour to override

   5:

   6:         if (e) {

   7:             e.preventDefault();

   8:         }

   9:         else {

  10:             event.returnValue = false;

  11:         }

  12:         var oTR = control.document.selection.createRange();

  13:         var insertLength = maxLength - control.value.length + oTR.text.length;

  14:         var copiedData = window.clipboardData.getData(“Text”).substr(0, insertLength);

  15:         oTR.text = copiedData;

  16:

  17:         this._refreshCountTextBox();

  18:     },

Limitations & Remarks

Although the sample project is in .NET 3.5, the code is fully 2.0 compatible. It works fine in IE 6.0 and 7.0, but for FireFox it limits the textbox but doesn’t print the number of characters left for some reason and I was too lazy to investigate it(see update).

Conclusion

This extender wraps up the needed strategy for limiting a textbox and showing how many characters left. You can use download the source code from here and use it in anyway you want.

Feel free to post suggestions, improvements or critics under this post or to my mail address sidarok at sidarok dot com.

UPDATE: Thanks to Michael, it works for Firefox now. Source is updated. See comments.

UPDATE 2 : I am not developing the source any further, including doing no compatibility checks or new updates. Please see the comments below of people who are gracefully providing information on the issues they come across with and don’t hesitate to share with others like they are doing.

Technorati Tags: ASP.NET,Javascript,HTML,AJAX,AJAX Control Toolkit