task Simple Javascript Character Counter and Alert


For a client's website form, I needed some javascript to count the number of characters entered on a particular form field. In addition, I wanted to alert the user about how many additional characters they could add before reaching the input's limit. I found a short snippet on JS fiddle and improved it for use with multiple fields on the same page. Whereas the original fiddle used element specific selectors and hard-coded limits, my revised version uses a custom html data attribute to set the max on a field by field basis.

Improved Character Counting Remaining on Textarea (ver 1)

The first version, like the original, has a maxlength property on the input. The following variant doesn't cap the user, but instead gives the user feedback about how far over the limit they've gone.

Improved Character Counting Remaining on Textarea (ver 2, w/ alert)

I got 99 problems, but characters ain't one of them!