Click here to Skip to main content
15,860,859 members
Articles / Web Development / HTML
Article

Characters Remaining in TextBox

Rate me:
Please Sign up or sign in to vote.
3.56/5 (11 votes)
21 Dec 20051 min read 86.2K   26   7
A simple, re-usable control that shows the user how many characters they have left, as they are typing.

Introduction

While contemplating a project at work, I realized it would be useful to give users feedback on the number of characters remaining for text area controls with a set maximum length. Originally, I set out to create inline code that could perform the task, however, with a little tweaking, I found the code works better as a re-usable User Control. The code for the control is very simple:

ASP.NET
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

    txtCount.Text = txtInput.MaxLength.ToString();
    
    txtInput.Attributes.Add("onKeyUp", 
       "javascript:document.getElementById('"+ txtCount.ClientID + 
       "').setAttribute('value', (" + txtInput.MaxLength + 
       " - parseInt(document.getElementById('" + txtInput.ClientID + 
       "').getAttribute('value').length)));");
}
public int MaxLength
{
    get { return txtInput.MaxLength; }
    set { txtInput.MaxLength = value; }
}
</script>

<table>
 <tr>
  <td>
   <asp:Label ID="Label1" runat=server>Characters Left: </asp:Label>
   <asp:TextBox ID="txtCount" runat="server" 
            BorderStyle="None" ReadOnly="True">0</asp:TextBox>
  </td>
 </tr>
 <tr>
  <td>
   <asp:TextBox ID=txtInput runat=server BorderColor="Gray" 
           BorderStyle="Solid" BorderWidth="1px" 
           Height="125px" MaxLength="2000" 
           TextMode="MultiLine" 
           Width="350px"></asp:TextBox>
  </td>
 </tr>
</table>

The bulk of the work is done in the Page_Load event. Using the Attributes collection, I added an OnKeyUp event that gets the length of the input text, subtracts that from the maximum length allowed by the input textbox control, and displays it in another text box. Because the JavaScript works off the ID of the control, and ASP.NET dynamically assigns unique IDs to each control generated, you can have dozens of these on a page and each will track only its own contents.

To round out the control, I would suggest exposing some properties of the underlying controls through public properties of the user control (such as MaxLength, above), so the control can be configured separately for different pages/sites.

Caveat

Because the TextArea HTML control does not support MaxLength, the JavaScript will not prevent a user from entering more characters. However, you can check against the MaxLength property for validation purposes, or simply truncate the excess text when processing the form.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionTry this Pin
glxd2-Jul-11 23:55
glxd2-Jul-11 23:55 
Questionuse a label control to view the count Pin
beckrao19-Dec-08 16:20
beckrao19-Dec-08 16:20 
QuestionProblem with firefox? Pin
Netmonster015-Jul-06 4:01
Netmonster015-Jul-06 4:01 
I can not get this to work in firefox any ideas?

Thanks,

KC
GeneralIt works great but not inside the FormView block Pin
Sue_NC17-Jan-06 15:28
Sue_NC17-Jan-06 15:28 
GeneralRe: It works great but not inside the FormView block Pin
renzea3-Mar-06 22:43
renzea3-Mar-06 22:43 
QuestionJust truncate on the postback? Pin
Ashaman27-Dec-05 2:57
Ashaman27-Dec-05 2:57 
AnswerRe: Just truncate on the postback? Pin
renzea27-Dec-05 17:50
renzea27-Dec-05 17:50 

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

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