I'm trying to write a simple remaining chars counter for my backoffice input texts with jQuery but it doesn't work:

<script type="text/javascript">
$(document).ready(function(){

function text_counter (input_text, target) {
    var max = $(input_text).attr("maxlength");
    $(input_text).keydown (function () {
        var timer = setTimeout (function () {
            var text = $(input_text).text();
            var current = text.length;
            $(target).text(current + "/" + max);
        }, 1);
    });
}               
text_counter ("#description", "#description_counter");

});
</script>

<input id="description" type="text" maxlength="250" value="Default text">
<span id="description_counter"></span>

If I start to write inside the input, the span element change in 12/250 and freeze here (12 == "Default text".length).

Where I'm wrong?

I'm trying to write a simple remaining chars counter for my backoffice input texts with jQuery but it doesn't work:

<script type="text/javascript">
$(document).ready(function(){

function text_counter (input_text, target) {
    var max = $(input_text).attr("maxlength");
    $(input_text).keydown (function () {
        var timer = setTimeout (function () {
            var text = $(input_text).text();
            var current = text.length;
            $(target).text(current + "/" + max);
        }, 1);
    });
}               
text_counter ("#description", "#description_counter");

});
</script>

<input id="description" type="text" maxlength="250" value="Default text">
<span id="description_counter"></span>

If I start to write inside the input, the span element change in 12/250 and freeze here (12 == "Default text".length).

Where I'm wrong?

• javascript
• jquery

• 1 Why do you have a timer? – Mark Commented Dec 15, 2010 at 22:11
• Because he should be using the keypress event :) – Ruan Mendes Commented Dec 15, 2010 at 22:28

5 Answers 5

try using val() instead of text()

var text = $(input_text).val();

http://jsbin./epeva5/edit

This is my solution for you:

function text_counter(input_text, target) {
    var max = input_text.attr("maxlength");
    input_text.keyup(function() {
        target.text(this.value.length + "/" + max)
    });
}

text_counter($("#description"), $("#description_counter"));

Example: http://jsfiddle/jonathon/dkWHp/

A couple of differences. Firstly, I use the keyup event. Otherwise you're running the code before the character is removed (maybe that's why you're using the setTimeout) - it also gets fired on a backspace. I also pass the jQuery objects into the text_counter function. This was you just create the single jQuery selector (instead of the multiple $(input_text) calls). In the keyup handler, I just call this.value.length since this is a HTML input element and I don't need to bother jQuery for this.

For good measure, here's another implementation of text_counter:

function text_counter(input_text, target) {
    var max = input_text.attr("maxlength");
    setInterval(function(){
        target.text(input_text.val().length + "/" + max)
    }, 100);
}

Example: http://jsfiddle/jonathon/vZHGU/

Instead of handling the key events, I just set up a timer which sets the text of target every 100ms. Why show this? When you handle a key event, it will only fire once. The second piece of code I gave will continually poll the length of the text box so that the span gets updated even if the backspace button is held down.

I don't like the second solution because it creates unnecessary work (the setInterval will run regardless of the user interaction with the box) but I do show it because you could play with both solutions. For example, you could invoke 5 seconds of polling on a keypress or something to get the best of both worlds :)

I had a similar issue and I wrote a jQuery / BootStrap plugin for that. You can use it as:

$('input.className').maxlength({
   threshold: 10,
   warningClass: "label label-success",
   limitReachedClass: "label label-important",
   separator: ' of ',
   preText: 'You have ',
   postText: ' chars remaining.'
 });

You can get it from github: http://mimo84.github.io/bootstrap-maxlength/ (you'll find some examples as well).

$(function(){

  function text_counter (input_text, target) 
  {
    var $input = $(input_text);
    var $target = $(target);
    var max = $input.attr("maxlength");
    var defaultText = $input.val();

    $(input_text).keypress(function () {
      var val = $input.val();
      var len = val.length;
      if (val == defaultText) {
        len == 0;
      }
      $target.text(len + "/" + max);
    });
  }
  text_counter ("#description", "#description_counter");

});