Auto Count Textbox character

**johnsonlim026** · February 25th, 2009, 09:25 AM

Hi,
i am doing a text box counter which automatically count the total character in the text box as user typing and show it in a label.So for any key user typing including "delete" and "backspace"key , the total character will be shown in the label automatically.

My coding is as below :

Code:

txtMsg.Attributes.Add("OnKeyPress", "return  txtCount(event,'txtMsg')")

My javascript is as below

Code:

 function txtCount(e, txtid)
    {
      var evt = e ? e : window.event;
      var txt = document.getElementById(txtid);
      var x;
      
     x=document.getElementById("txtMsg").value.length;
     
     document.getElementById("Label2").value=x;
     
      }

However, i am not able to deliver the total count result to label2 and also when user click "delete" or "backspace" button, my javascript did not working and count the total character.Does anyone has any idea on this?

**Alsvha** · February 25th, 2009, 05:33 PM

If you need to count all characters (backspace counts as 1, delete counts as one) - then you can't just take the length of the value of the textbox because that will only count the - well length of the content and backspace doesn't add to the length.

You need to increment a counter for each call to the javascript function.

**johnsonlim026** · February 25th, 2009, 08:05 PM

Hi, my purpose is to count every single character enter by user.
For example : when user key in "abc" in the textbox, my label will return 3.
When user press delete key to delete "c" from the string "abc",my textbox will be "ab" and my label will return 2.

I have settle the issue to pass the value to label using this code :
document.getElementById("Label2").innerText=x;

But i fail to fire my javascript function when user press delete key and backspace key. Thus my label did not return correct value...

Does anyone has idea on this?

**sr_jay** · February 25th, 2009, 11:55 PM

Hi,

You could try this sample. I am giving code for the default page for a sample application. Just put this code on the Default.aspx and Default.aspx.cs of a new web site in VS 2005. If you run the application you will get a multiline text box into which you can type. You type into the text box and the number of characters gets counted and displayed on the side. It takes care of the return key and the back space key also. And it works in both IE and Firefox. Generally it is difficult to trap the backspace key in IE.

Html code for Default.aspx

Code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var totchars = 0;
    function countchars(e)
    {
     var key;     
     if(window.event)
          key = window.event.keyCode; //IE
     else
          key = e.which; //firefox     
     if(key != 13 && key != 8)
       totchars++;
     else if(key == 8 && totchars > 0)
       totchars--;       
     lbl.value = totchars;
}
function countcharsforIE(e)
{
  if(window.event && window.event.keyCode == 8 && totchars > 0)
       totchars--;       
  lbl.value = totchars;
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="mytextbox" TextMode="MultiLine" runat="server"></asp:TextBox>     
    <asp:TextBox ID="mylabel" BorderStyle="None" Enabled="false" Text="0" runat="server"></asp:TextBox>
    <script language="javascript" type="text/javascript">
      var txt = document.getElementById("<%=mytextbox.ClientID %>");
      var lbl = document.getElementById("<%=mylabel.ClientID %>");
    </script>
    </div>
    </form>
</body>
</html>

Code for Default.aspx.cs

Code:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
      mytextbox.Attributes.Add("onkeypress", "countchars(event)");
      /* The line below is necessary to trap the back space key in IE */ 
      mytextbox.Attributes.Add("onkeydown", "countcharsforIE(event)");

    }
}

I think this should work fine.

Warm Regards.

Originally Posted by johnsonlim026

Hi, my purpose is to count every single character enter by user.
For example : when user key in "abc" in the textbox, my label will return 3.
When user press delete key to delete "c" from the string "abc",my textbox will be "ab" and my label will return 2.

I have settle the issue to pass the value to label using this code :
document.getElementById("Label2").innerText=x;

But i fail to fire my javascript function when user press delete key and backspace key. Thus my label did not return correct value...

Does anyone has idea on this?

**johnsonlim026** · February 26th, 2009, 07:25 PM

Hi, got it .Thanks !!

Thread: Auto Count Textbox character

Thread Tools

Display

Auto Count Textbox character

Re: Auto Count Textbox character

Re: Auto Count Textbox character

Re: Auto Count Textbox character

Re: Auto Count Textbox character

Posting Permissions