Simplecharcounter.js

Jquery plugin, simulate the character counter like counter in twitter (old version). See examples and readme for more details.

My first plugin ever, made with <3 and some blood. (ouch)

View the Project on GitHub elporfirio/simpleCharCounter.js

What is simpleCharCounter.js

Is the simplest way to count characters over input and textarea elements.

No design, no complex functions, only a few option. Just apply your favorite flavour for obtain better results.

Requirements

How to install

Download or clone the project, and add simpleCC.js to your HTML document.

Demo 01: Simple Usage

$("#demo3").simpleCharCounter({
        max: 10
    });

Demo 02: Set custom char counter container

$("#demo2").simpleCharCounter({
        label: "#counter"
    });

Demo 03: On input element and setting char limit

$("#demo3").simpleCharCounter({
        max: 10
    });

Default options

$(".target").simpleCharCounter({
    max: 140,
    color: '#000',
    warnColor: '#F00',
    label: '',
    threshold: 0.2,
    displayMode: 'normal',
    onEmpty: 'none',
    legend: 'chars left',
    strictText: false
});
option description
max
set limit amount of chars to write
color
set the basic color for the counter
warnColor
set the color when reaching limit of chars
label
container for text display
threshold
set limit radio of chars (max * threshold)
displayMode
normal the count text appears always, write the count text appears when the user start to type;
legend
change the count display text
strictText
set to true, if you want lock input, when the limit chars is reached (the input / textarea keeps enabled).

Contributors

Thank you to @zetta for the first try of this plugin.