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:
Switching from Next.js to Vite + wouter July 28, 2023 JavaScript
How to SSG a Vite SPA April 26, 2025 JavaScript
An ideal pattern to combine React Router with TanStack Query November 18, 2024 JavaScript
swr compared to @tanstack/react-query August 30, 2024 JavaScript