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.

Previous:
Mocking DBRefs in Mongoose and nodeunit April 14, 2011 MongoDB, JavaScript
Next:
A script tag's type in HTML5 May 10, 2011 JavaScript
Related by category:
How to SSG a Vite SPA April 26, 2025 JavaScript
Switching from Next.js to Vite + wouter July 28, 2023 JavaScript
An ideal pattern to combine React Router with TanStack Query November 18, 2024 JavaScript
get in JavaScript is the same as property in Python February 13, 2025 JavaScript