Showing remaining characters in a form input element

Published November 16th, 2006

One of the challenges in creating usable forms on HTML pages is presenting to the user information about limits on the data they’re entering, without making the form overly verbose.

One example of this is where an input element is limited to a maximum number of characters. In the past I’ve implemented a little counter next to the field, which counted down as you typed and showed the total and remaining characters. It worked just fine, but I always found it difficult to fit it neatly into the form layout.

Anyway, on the way to work today I had an idea: why not use the input element itself as a ‘progress bar’? You can see the result here (couldn’t get WordPress to play nicely with included JavaScript). You can grab the code here (example HTML and compressed .js file also included).

So as you can see, the bar increments as you type: when it hits the right-hand side of the box, you have no more characters left. It only works on elements that can have a ‘maxlength’ attribute, ie. text and password boxes. I thought that you could do something similar with a textarea (only maybe top-bottom instead of left-right) but textarea elements don’t support maxlength.

It’s just a proof-of-concept but I quite like the idea: although it’s not as specific as saying ‘you have 10 of 20 characters left’ it does give a nice, simple visual cue without changing the layout of the form at all.

I’ve tested it successfully on Firefox (1.5 and 2), IE6 and Opera 9. Any feedback on whether it works with Safari or Konqueror would be appreciated. If you choose to use it, the usual licence applies: do what you want with it; please leave the credit and my web address in there; don’t blame me if it breaks anything.

Get a Trackback link

6 Comments

  1. Keavy on November 17, 2006

    nice idea. It didn’t work for me on the mac – Safari doesn’t let you change background colors in input fields, as far as I know.

  2. Stickman on November 17, 2006

    :) Surprise! I just had another thing I’m working on fail on in Safari. Grr! Thanks for the feedback anyway.

  3. DontBogartMe on November 19, 2006

    Ingenious idea that, Stick. I’m only on ‘normal’ browsers here so can’t do any useful testing for you – it worked on FF2 tho, as you know.

    You might wanna spell check your post title though :)

  4. Stickman on November 20, 2006

    Thanks!

    “You might wanna spell check your post title though ”

    I have no idea what you’re talking about.

    *whistles*

  5. Howard on July 9, 2008

    I just wondered if you ever did anything with this? Did you still end up liking it?

    I’m not sure if I like it or not; ie, I’m not sure the meaning of the advancing color bar would be obvious to naive (or not so naive) users.

    One thought tho: you might try changing the color to a richer red when the bar hits the right end of the input field, signifying a “stop” or a “caution” as the user hits the character limit. Maybe even blinking the color bar a couple of times for good measure. And of course you can do a few siren whoops in SoundManager. :-)
    Howard

  6. Stickman on July 9, 2008

    To be honest, after writing it I pretty much forgot about it. The fact that it didn’t work in Safari was a turn-off (although I’ve just tested it on v3.1.2 and it now works fine) but mostly, like you, I wasn’t sure if it was clear enough what was happening. I like the idea of ‘flashing’ the bar though.

    To be honest, because it’s not self-explanatory I think probably it would only ever really be useful in conjunction with another type of notification. Which makes it rather redundant.

Leave a comment

Comment Policy: First time comments are moderated. Please be patient.

OpenID

Anonymous