Help with jQuery text box length counter

Question

I have a text box with a number outside of it that I initially set at 7 via script. When I type in the text box I want the number to decrease, when I delete characters I want it to increase. The script I have now decreases the number as expected, but when I delete it still decreases. When there is no characters left in the field and I press delete the number increases. Can someone put me on the right track? Thanks.

Here's what I have:

var origCnt = 7; $('#cntEngDesg_insert').html(origCnt); $('#txtEngDesg_insert').keyup(function () { var currentlen = $('#txtEngDesg_insert').val().length; if (currentlen++) { origCnt--; $('#cntEngDesg_insert').html(origCnt); } else if (currentlen--) { origCnt++; $('#cntEngDesg_insert').html(origCnt); } });

karim79 · Accepted Answer · 2010-11-20 00:23:52Z

The solution is actually a lot simpler:

var origCnt = 7; $('#cntEngDesg_insert').html(origCnt); $('#txtEngDesg_insert').keyup(function (e) { var currentlen = $('#txtEngDesg_insert').val().length; if(currentlen <= origCnt) { $('#cntEngDesg_insert').html(origCnt - currentlen); } else { $(this).val($(this).val().substring(0, origCnt)); } });

Demo: http://jsfiddle.net/snpeX/

should have refreshed before submitting my identical solution :)
@nick - I just edited it, now it will actually restrict input to the correct length, plus there is a demo. @Variant - I do that all the time :)

Variant · Accepted Answer · 2010-11-20 00:22:05Z

Why not just do this?

var origCnt = 7; $('#cntEngDesg_insert').html(origCnt); $('#txtEngDesg_insert').keyup(function () { var currentlen = $('#txtEngDesg_insert').val().length; $('#cntEngDesg_insert').html(origCnt - currentlen ); });

you can obviously add some tests to see if you go below zero and handle it in any fashion you need

Bill Criswell · Accepted Answer · 2010-11-20 01:51:10Z

It's Friday night and I didn't go out to start drinking yet so I wanted to do something to speed up the time even though the answer is already provided. I came up with this which will make it reusable and takes advantage of HTML features (in those rare times when there's no JavaScript).

http://pastie.org/pastes/1312188/text

Collectives™ on Stack Overflow

Help with jQuery text box length counter

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related