NDP Software :: Show Character Limit jQuery Plugin Demos

Show Character Limit jQuery Plugin Demos

jQuery plugin to display interactive character limit feedback about a text field or textarea. The Show Char Limit Project is hosted on GitHub.

Simple Usage Text field with maxlength attribute. Creates the status HTML element automatically.

<input maxlength="20" type='text' value="defaults" /> $('#input_example1 input').show_char_limit(); ...
Explicit control over status element, style and length.

<input type='text' value="custom feedback" /> <span class='status'></span> $('#input_example2 input').show_char_limit({ status_element: '#input_example2 .status', status_style: 'chars_left', maxlength: 20 } );
Using a custom "error" element, which shows when in the error state. This also hides the "explanation" div, which is giving the feedback, so that this only shows validation errors.
4-letter Word Four characters ONLY!
$('#input_example3 input').show_char_limit(4, { status_element: '#input_example3 .status', error_element: '#input_example3', status_style: 'chars_typed' } ); <style> fieldset span.explanation { visibility: hidden; } fieldset.error span.explanation { visibility: visible; } fieldset.error span.status { background-color: red; color: white; } </style> <input type='text'/> <span class='status'></span> <span class='explanation'>Four characters ONLY!</span>
Text-area Example

$('#text_area_example textarea').show_char_limit(160, { status_element: '#text_area_example .status', error_element: '#text_area_example' } ); <textarea></textarea><span class='status'></span>

The caller provides the "status" element to display the feedback.
A status element will be created if not provided.
Supports instrumenting multiple fields at once. Can calculate the status field from the target field's ID, such field id tweet can map to id tweet_status, by specifying a suffix _status.
The current status can be formatted as count down, count up, or some other format.
Optionally it can add a class to any DOM elements when the field is over the limit. This is convenient as it allows turning an element red, or displaying a hidden div with more detailed error message.