maxlength_countdown() - a useful jQuery plugin for showing characters left

01 May 2011   6 comments   Javascript

Powered by Fusion×

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:


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?


Looks useful.
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.
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

Mocking DBRefs in Mongoose and nodeunit 14 April 2011
A script tag's type in HTML5 10 May 2011