I needed a counter on my input texts to say how many characters are left, so I came up with this. It creates a yellow box to the right of the input area, which is updated when the field is edited.

Counter Function

jQuery.fn.counter = function() {
  $(this).each(function() {
    var max = $(this).attr('maxlength');
    var val = $(this).attr('value');
    var cur = 0;
    if(val) // value="", or no value at all will cause an error
      cur = val.length;
    var left = max-cur;
    $(this).after("<div class='counter'>"
      + left.toString()+"</div>");
    // You can use something like this to align the
    // counter to the right of the input field.
    var c = $(this).next(".counter");
    c.width(40);
    c.css("position","relative");
    c.css("top",-$(this).height()-8);
    c.css("left",$(this).width()+8);
    c.css("background","yellow");

    $(this).keyup(function(i) {
      var max = $(this).attr('maxlength');
      var val = $(this).attr('value');
      var cur = 0;
      if(val)
        cur = val.length;
      var left = max-cur;
      $(this).next(".counter").text(left.toString());
      return this;
    });
  });
  return this;
}

Usage Examples

You’d use it like the following. In the example, #main is the main body area, and all fields will have a class of maxlength which need the counter.

$(document).ready(function() {
  $("#main form input.maxlength").counter();
});

Or you could search for any fields with a maxlength attribute:

$(document).ready(function() {
  $("form input[@maxlength]").counter();
});