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:
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" TextMode="multiLine" MaxLength="100" runat="server" onkeyup="javascript:CharCounter(this.id);" onblur="javascript:CharCounter(this.id);"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="100 chars remaining"></asp:Label>
</div>
<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" ;
}
</script>
</form>
</body>

Happy Coding!!

Advertisements
Comments
  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:

    nice….
    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(this.id,” + lblcharremail.ClientID + ” , ” + txtComments.MaxLength + “)”);
    txtComments.Attributes.Add(“onblur”, “javascript:CharCounter(this.id,” + 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:

WordPress.com Logo

You are commenting using your WordPress.com 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