Javascript: Maximum character validation and character counter for a textbox

Posted: August 14, 2008 in ASP.NET, Javascript
Tags: , ,

Here I have provided a solution to put a counter for a textbox, that can be updated as each character typed into the textbox. This script will also validate the maximum character length allowed for a textbox. This script will also work when anyone copy/paste the text into the textbox. Textbox can be either single line or multi line. Check the following script:
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" TextMode="multiLine" MaxLength="100" runat="server" onkeyup="javascript:CharCounter(;" onblur="javascript:CharCounter(;"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="100 chars remaining"></asp:Label>
<script language="javascript" type="text/javascript">
function CharCounter(textId)
var totalchar = '<%= TextBox1.MaxLength %>';
var txtbox = document.getElementById(textId);
var lbl = document.getElementById('<% =Label1.ClientID %>');
if(txtbox.value.length > totalchar)
txtbox.value = txtbox.value.substring(0,totalchar);
lbl.innerText = (totalchar - txtbox.value.length) + " chars remaining" ;

Happy Coding!!

  1. Good … and its working

  2. […] Tags: javascript word counter trackback Few months back I have posted one article on “Javascript: Maximum character validation and character counter for a textbox”, now here I have given one example on how to count words out of any textarea or […]

  3. nikhil says:

    It’s Work..

    —-but i use that way—–

    —————aspx page——————

    ————–aspx.cs page————————

    protected void Page_Load(object sender, EventArgs e)

    txtComments.Attributes.Add(“onkeyup”, “javascript:CharCounter(,” + lblcharremail.ClientID + ” , ” + txtComments.MaxLength + “)”);
    txtComments.Attributes.Add(“onblur”, “javascript:CharCounter(,” + lblcharremail.ClientID + ” , ” + txtComments.MaxLength + “)”);


    ——————-jscript.js page—————-

    function CharCounter(textId, lbl, totalchar) {
    var txtbox = document.getElementById(textId);
    if (txtbox.value.length > totalchar) {
    txtbox.value = txtbox.value.substring(0, totalchar);
    lbl.innerText = (totalchar – txtbox.value.length) + ” chars remaining”;

  4. DMAsuncion says:

    Thanks, Nice Idea!!!

  5. diffy says:

    Super simple solution that works! Thanks so much for sharing the code!

  6. Meganutter says:

    This solution worked for IE but failed to update the label in FF.
    Instead replace this

    label will be
    250 Characters remaining

    lbl.innerText = (totalchar – txtbox.value.length) + ” chars remaining”;
    will be
    document.getElementById(“Remaining”).innerHTML = (totalchar – txtbox.value.length) + ” Characters left”;

    works in both IE8 (compatibility on/off) and FF 3.5

  7. Raj says:

    Thank you, this woked

  8. viky says:

    to much helpfull this code

  9. Dadan Tiwari says:

    what is the purpose of putting code if its not working or if not useful to any one.
    I tried but its not working.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s