A good jQuery text counter plugin

Here is a simple, but sometimes necessary in different projects, jQuery text counter plugin.

Easy to use and configurable jQuery text counter plugin

A jQuery plugin for counting and limiting characters / words on text input or textarea. If we need such a functionality, this plugin will be perfect.

Flexible jQuery text counter plugin
Flexible jQuery text counter plugin

How to use

We can include script after the jQuery library:

<script src="/path/to/textcounter.min.js"></script>

Or use npm:

npm install jquery-text-counter

or Bower:

bower install jquery-text-counter

Add text input or textarea field in the document. Then we can apply the plugin for input. The simplest example:

$('input').textcounter();

We can adjust parameters, for example define maximum words and allow further input:

$('input').textcounter({
    type: "word",
    max: 15,
    stopInputAtMaximum: false
});

Implementation of countdown is also very easy:

$('input').textcounter({
    min: 20,
    countDownText: "Characters Left: "
});

By default the plugin creates and appends the following element after the input:

<div class="text-count-wrapper">
    Total Count:
    <span class="text-count">0</span>
</div>

Callbacks

maxcount(el){} – Fires when a counter reaches the maximum word/character count

mincount(el){} – Fires when a counter reaches the minimum word/character count

init(el){} – Fires after the counter is initialized

License: MIT

The demo you can find here.

Get jQuery Text Counter Plugin from GitHub:

https://github.com/ractoon/jQuery-Text-Counter

See also:

jQuery – count characters in textarea and text inputs

3…2…1… Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1