jQuery plugin: Simplest character count for textareas & input fields

jQuery plugin: Simplest character count for textareas & input fields

The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

The first thing that this plugin do is create a sibling element (it adds is immediately AFTER the form element), the “counter”, where the remaining character info is stored. On each key up event or text field value change the counting function is triggered and the contents of this “counter” element is changed accordingly. If the remaining character count reaches the “warning” zone (gets close to zero) the CSS class is added. We use this class to change the color of the character count info. If the count reaches zero and goes beyond it another class is added so we can use another style for exceeding the limit.

Leave a Reply