2013-06-29 jQuery Plugin JavaScript
Character Counters have always bothered me during development as I was never able to find a good place for them. Sometimes I had forms with multiple inputs and having a little character counter bubble above each one just made the form look bloated and messy. Trying to make it look pretty was always too much of an effort and required a bunch of extra ugly CSS as well that I never really liked. Most of the time the CSS wasn’t even reusable as each form required a little bit of a modification to make the character counter look well with the other field on the form.
I had played with some character counter ideas before but ultimately I came up with this plugin that I have been quite satisfied with. It’s a little bubble that only appears when you type and then nicely fades out when you stop typing in that text or textarea input. It’s nice and elegant, and requires no more CSS, just drop in the plugin and go.
The plugin is only ~3Kb minified so it doesn’t add much of a footprint to your existing code base. It should also work with your existing text and textarea inputs. The CSS is also very easy to modify and you can set your own theme if you want to modify the colors or change the appearance of the bubble.