Click here to Skip to main content
15,304,276 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
Hi all,
i have multiline textbox. i use javascript funtion to display the characted count when the user types in the text box.

The code is like so:
text box and label-
XML
<asp:TextBox ID="txtSignature" runat="server" TextMode = "MultiLine"
                     MaxLength="160" Enabled = "false" ></asp:TextBox>
                     <asp:Label ID="lblCharacters" runat="server"></asp:Label>


javascript function to update the label -
XML
function DisplayCount()
   {
       var length = document.getElementById('<%= txtSignature.ClientID %>').value.length;
       document.getElementById('<%= lblCharacters.ClientID%>').innerText = length+ " of 160 used!";
   }

registering the event on page load -
txtSignature.Attributes.Add("onkeypress", "javascript:return DisplayCount();");


How can i catch the backspace and delete key presses and update the character count?
ANy help will be appreciated.

Thanks.
Posted

Handle the onkeydown event. I don't see anywhere that your code hooks up any event at all. Call your method in that event.
   
Comments
AnnSJ 8-Jun-11 4:27am
   
thanks..
Christian is right. I think this JQuery link provides what you want. Below is the code I tried (It worked):
<script type="text/javascript" src="jquery-1.6.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" language="javascript" >
        $(document).ready(function() {
            $("#txtSignature").keydown(function(event) {
                var labelValue = parseInt($("#lblCharacters").html());
                if (isNaN(labelValue))
                    labelValue = 0;
                if (event.keyCode == 8 || event.keyCode == 46) {
                    $("#lblCharacters").html(labelValue - 1);
                }
                else {
                    $("#lblCharacters").html(labelValue + 1);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSignature" runat="server" TextMode = "MultiLine"
                     MaxLength="160" Enabled = "true" ></asp:TextBox>
        <asp:Label ID="lblCharacters" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>


Note:
1. You have to put your logic to handle count going negative.
2. You have to handle when cursor is at left end and "backspace" is pressed.
2. You have to handle when cursor is at right end and "delete" is pressed.

I could have done this but I leave it to you.
   
v3
Comments
AnnSJ 8-Jun-11 4:28am
   
thanks.. i tried the keydown event n that updates the count if i add or remove text
HI
The ASCII value for backspace is 8 and in octa 0010 in hexa-- 0x08


in the keypress Event use if condition and check ascii value if it is 8 then cancel the event

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" language="javascript" >
function int check(src,eventargs)
{
if (eventargs.keyCode == 8)

{
count=count -1;
}
else
{
count=count+1;
}
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSignature" runat="server" TextMode = "MultiLine"
MaxLength="160" Enabled = "true" ></asp:TextBox>
<asp:Label ID="lblCharacters" runat="server"></asp:Label>
</div>
</form>
</body>
</html>


fill the remaining code it will work
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900