NDP Software 

Compelling Software • Design & Construction

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.

  1. Simple Usage Text field with maxlength attribute. Creates the status HTML element automatically.
    12 characters left
    <input maxlength="20" type='text' value="defaults" /> $('#input_example1 input').show_char_limit(); ...
  2. Explicit control over status element, style and length.
    5
    <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 } );
  3. 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.
    0 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>
  4. Text-area Example
    160 characters left
    $('#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>

Documentation & Download

Please see GitHub page

Alternative Downloads

jquery.show_char_limit-1.2.0.js

Source Code

At Github, including ScrewUnit tests

Previous Version

jquery.show_char_limit-1.1.2.js jquery.show_char_limit-1.1.1.js jquery.show_char_limit-1.1.js jquery.show_char_limit-1.0.js

Features

  • 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.