Simplecharcounter.js by porfidev

What is simpleCharCounter.js

The simplest way to count characters in input and textarea elements. No design, no complex features—just a few options. Apply your own style to get the best results.

Requirements

jQuery 1.9+

How to install

NPM

npm i @porfidev/simple-char-counter

Manual install

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

Usage

via npm

import * as $ from 'jquery';
import '@porfidev/simple-char-counter';

$('div').simpleCharCounter({
    maxChars: 100,
    counterElement: 'span'
});

via manual import

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="simpleCC.min.js"></script>

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.