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?

Comments

Post your own comment
Frank

Looks useful.

iivvoo

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

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

Have you tried on linux? The specific middle-button-paste isn't registered as a keypress (ctrl/alt-v is)

Peter Bengtsson

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

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.

Related posts