πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple counter of characters for multiple form fields based on jQuery.

Forms Plugins

Documentation

jQuery countChar plugin

A simple counter of characters for multiple form fields based on jQuery

Demo

Example is located here.

Usage

Install via bower:

$ bower install jquery-countchar --save 

or via npm:

$ npm install jquery-countchar --save 

or download the jquery.countchar.min.js file into your repo.

Then, include script file after the jQuery library and initialize the plugin:

$('.selector').countChar();

Options

You can use the following options as plugin params:

  • text β€” Text for the counter;
  • textPosition β€” Text position for the counter: before or after. Defaults to before;
  • limit β€” Maximum number of characters for each field;
  • limitErrorClass β€” Error class name for limit. Defaults to countchar-limit-error;
  • outputContainer β€” Container for output text and counter. Defaults to #countchar-output;
  • onLimitCallback(el, value) β€” Callback function called when limit condition worked;
  • onCounterCallback(number) β€” Callback function called each time when it counted the number of characters.

Also, you can add data-countchar and data-countchar-limit attributes to set a regular expression and a characters limit for the current form field. For example:

<input type="text" name="example" data-countchar="[\d]+" data-countchar-limit="10">

It will count only numbers and the maximum number of characters will 10. If the characters will be more, it will add error class to the input element. The priority data-countchar-limit more than the limit parameter.

Release History

  • 1.1.0 β€” Added npm support.
  • 1.0.0 β€” Added bower support.

License

MIT Β© Ilya Fedotov


You May Also Like