Displaying a Character Counter for Multiline Textboxes

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

Many Textbox fields restrict the number of characters entered in them for the
sake of business validation. With single line textboxes it is just a matter of
setting the MaxLength property. However, MaxLength property doesn’t work as
expected for multiline textboxes. When you set the TextMode property of ASP.NET
TextBox control to MultiLine the Textbox control is rendered as a TEXTAREA element
which doesn’t support this property. Developers often use custom client side
JavaScript code to enforce that only a certain number of characters are entered
into a multiline textbox. But this must be done for every multiline textbox
control for which you want the restriction enforced. Wouldn’t it be easy if you
can enforce this restriction without touching the Textbox control markup or its
server side code? ASP.NET AJAX client behaviors allow you to do just that and in the
remainder of this article you will learn how.

Understanding the problem

Before you proceed further let’s understand the problem we are trying to
solve. When you use Textbox web control with its TextMode property set to
Singleline, ASP.NET emits an INPUT element in the resultant HTML markup. For
example, if your Textbox web control markup is like this :

<asp:TextBox ID="TextBox1" runat="server" MaxLength="20" />

The resultant HTML markup will be :

<input name="TextBox1" type="text" maxlength="20" id="TextBox1" />

Notice how the MaxLength property of the wTextbox web control is getting
converted as maxlength attribute of the INPUT tag. However, if you set TextMode
property of the Textbox to MultiLine then the same textbox gets emitted as
TEXTAREA element as shown below :

<textarea name="TextBox1" rows="2" cols="20" id="TextBox2"></textarea>

Notice that there is no maxlength attributed in the above markup (since
TEXTAREA doesn’t support it). Instead the MaxLength property is rendered as cols
attribute. In short you cannot restrict the amount of text entered into a
multiline textbox unless you write some extra pieces of code.

Non-AJAX Solutions

At first glance you may think of using the two common solutions :

1. Handle client side events of TEXTAREA element (such as keypress, keydown
   and keyup) using client side JavaScript function.
2. Validate the textbox web control on the server

The first approach is, no doubt, a commonly used solution. However, you are
required to add the relevant event handling attributes in the Attributes
collection of the web control. The down side is, there is a sort of tight coupling between the
client side JavaScript function and the TEXTAREA. Consider the code below that
adds a client side event handler for keypress event.

TextBox1.Attributes.Add("onkeyup", "return MyFunction();");

Imagine a case that you have used the above technique at dozens of places
across several web forms. For some reason you now want to change the function
name or want to do something else in addition to checking the length of the text
entered. In such cases it can be tedious to change the server side code in all
those places.

The second approach, i.e., validating on the server side is not a good choice since
it will involve an extra server round trip. You can use this approach as an
additional safeguard against clients bypassing the client side validation
(browsers with JavaScript disabled, programmatic form submissions etc.) but
relying entirely on server side validation would be a poor solution.

What is an AJAX Client Behavior?

AJAX client behaviors can be very handy in such situations because they
extend existing HTML elements by adding some extra functionality. The behavior
can be developed independent of the web control and once developed can be simply
attached (or removed) to the control.

At code level an AJAX client behavior is a class that inherits from Sys.UI.Behavior class.
Normally, behaviors don’t create anything new. Rather they add
extra features to the existing HTML elements. Once developed an AJAX client
behavior can be attached with an element with the help of an extender control.
An extender control is a server side class that inherits from ExtenderControl
base class.

Example Scenario

Consider a case where you have a TextBox web control whose TextMode property
is set to MultiLine. This textbox accepts profile information from the
user and you want to enforce following features:

• The textbox must accept only certain number of characters say 500.
• As the user is entering the text a counter should be displayed
  indicating how much text has been entered or how much can still be entered.
  (Twitter does something similar when you start entering text)
• If user exceeds the maximum length (500 in this case) the textbox should
  disallow further entry or it should display a warning message.
• All this should be achieved without touching the Textbox web control
  markup or its server side code.

Software Needed

In order to work through the example that follows you need to have ASP.NET
3.5 or above installed on your machine. Though the example is developed using
Microsoft Visual Studio 2008 you can also use Microsoft Visual Studio 2010 or Microsoft Visual Web Developer Express Edition.