event fired when backspace is pressed in a textbox

Question

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 7-Jun-11 21:39pm

AnnSJ

Add a Solution

3 solutions

Solution 2

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.

Posted 7-Jun-11 22:00pm

RakeshMeena

Updated 7-Jun-11 22:20pm

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

Solution 3

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

Posted 7-Jun-11 23:18pm

Harishk925

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Christian Graus · Accepted Answer · 2011-06-07T21:41:00

Solution 1

Handle the onkeydown event. I don't see anywhere that your code hooks up any event at all. Call your method in that event.

Posted 7-Jun-11 21:41pm

Christian Graus

Comments

AnnSJ 8-Jun-11 4:27am

thanks..