I have the following textarea:

<asp:TextBox ID="TxtBox200" runat="server" 
        TextMode="MultiLine" MaxLength="200" ></asp:TextBox>
<span id="charCount"></span>

why isn't the following javascript working:

<script>
    $('#TxtBox200').keypress(function() {
    var max = 200;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});
</script>

EDIT: any ideas how I can cater for backsapce (thus no of characters left increase)?

I have the following textarea:

<asp:TextBox ID="TxtBox200" runat="server" 
        TextMode="MultiLine" MaxLength="200" ></asp:TextBox>
<span id="charCount"></span>

why isn't the following javascript working:

<script>
    $('#TxtBox200').keypress(function() {
    var max = 200;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});
</script>

EDIT: any ideas how I can cater for backsapce (thus no of characters left increase)?

• javascript
• asp

Share Follow edited Jul 19, 2013 at 12:43 user1986761 asked Jul 19, 2013 at 12:20 user1986761user1986761 22911 gold badge77 silver badges2020 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

If you're using C# 4+ you'll probably need to use ClientIDMode = Static to make that work, otherwise your id will be changed by asp render engine and won't be TxtBox200

<asp:TextBox ID="TxtBox200" runat="server" ClientIDMode="Static"
    TextMode="MultiLine" MaxLength="200" >

If you're using C# < 4 and your javascript code is inline use @Sean Bright answer. If it's on a separated js file, you'll need to pass the id as parameter or use a css class as selector.

<asp:TextBox ID="TxtBox200" runat="server" ClientIDMode="Static"
    TextMode="MultiLine" MaxLength="200" CssClass="TxtBox200" >

and your selector would be

$('input.TxtBox200').keypress(function() {...}

Because in the generated HTML, TxtBox200 is not actually called TxtBox200. Try this instead:

$('<%= TxtBox200.ClientID %>').keypress(function() {

try including your javascript code in the window.load event

<script>
  $(document).ready(function (e) {
    $('#TxtBox200').keypress(function() {
    var max = 200;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});
 });
</script>

Check to make sure you ID is the same for the text box on the client side since asp can change it. Make the ClientID Mode Static (http://www.devcurry./2009/08/clientid-mode-in-aspnet-40.html) or do something like:

$('[id$=TxtBox200]').keypress(function() {

So there are 2 problems:

First, your jQuery keypress function is not within the DOM ready event, so it is trying to bind to your textbox before it is available, so instead write your script like this:

$(document).ready(function() {
        $('#<%= TxtBox200.ClientID %>').keypress(function(e) {
            alert('Key pressed.');
            var max = 200;
            var textLen = $(this).val().length;
            var textLeft = max - textLen;
            $('#charCount').text(
                textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
            );
        });
    });

Secondly, you need to reference your ASP.NET server control differently in your jQuery selector, because ASP.NET applies a hierarchical naming convention by default (i.e. MainContent_ctl100). You can force an ASP.NET server control to have a client name be static, like this:

<asp:TextBox ID="TxtBox200" runat="server" 
             TextMode="MultiLine" MaxLength="200" ClientIDMode="Static" ></asp:TextBox>

This will make the TextBox's ID be TxtBox200 and thus be referenced by .ClientID in the jQuery selector.