If people find this useful I might turn it into a proper jQuery plugin and publish it.

Without further ado; here's the demo

What it does is that for all input fields that have a maxlength="nnn" it shows a counter to the right that increases in opacity as it reaches the maximum. You can generally start it like this:

$('input[maxlength]').maxlength_countdown();

Since the plugin "hard codes" the count down expression in English you can override it easily like this:

$('input[name="message"]').maxlength_countdown(function (count, max) {
   return count + " (max: " + max + ")";
});

What do you think? Is it useful? Does it make sense?

Frank - 01 May 2011 [«« Reply to this]
Looks useful.
iivvoo - 02 May 2011 [«« Reply to this]
It has the same bug/issue that code that I wrote has: it doesn't handle paste events which is tricky but not impossible to solve. Never got to it, though.
Peter Bengtsson - 02 May 2011 [«« Reply to this]
I vaguely remember that IE has a proprietary "onpaste" event handler but I've never dug into it much. Probably because I rarely care about IE.

However, pasting here appears to work splendid in FF 4 and Chrome.
Anonymous - 02 May 2011 [«« Reply to this]
Have you tried on linux? The specific middle-button-paste isn't registered as a keypress (ctrl/alt-v is)
Peter Bengtsson - 02 May 2011 [«« Reply to this]
Haven't. I was going to say it could be solved with a onblur or onchange but I suspect that it could clash if the user pastes with the middle button then immediately clicks a submit button.

Fortunately this plugin is just a visual luxury.
James Socol - 08 May 2011 [«« Reply to this]
Useful, but it produces the same small-but-noticeable lag as my old solution by binding keyup. I think I'm going to experiment with using onfocus/onblur to add/remove a heartbeat-based method instead of a an event-driven one just to see what happens.


Your email will never ever be published