Real World JQuery Jeditable Char Counter

A JQuery-jeditable charcounter with everything you need. For real!

We were not happy with any of the existing charcounters for JQuqery's textarea. They were not built with real-world requirements in mind.

So we created a real-world charcounter that:

• Is hackable.
• Can count forwards and backwards.
• Can limit char count (or not, you choose).
• Supports any HTML tag container.
• Adds to the textarea the capability of submit on Enter.
• Displays a custom char count message (in your own language, even Hebrew).

TL;DR

Play with it right now on JSFiddle.

Installation

Add these lines to your HTML:

<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.jeditable.charcounter.realworld.min.js"></script>
<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.charcounter.realworld.min.js"></script>

Usage

$("#myTextArea4").charCounter();

$("#myTextArea3").charCounter(20, {
	container: "<em></em>",
	formatUp: "%1 characters typed",
	pulse: false,
	delay: 100
});

$("#myTextArea3").charCounter(20, {
	format: "%1 אותיות נותרו",
	countUp: false
});

Or even inside your JQuery datatables:

"aoColumns": [
            null,//null for read-only columns
            {
                type: 'charcounter',
                charcounter: {
                    characters: 60000
                }
            },
            null,//null for read-only columns
            null,//null for read-only columns
            null,//null for read-only columns
        ]

Customization

Property	Explanation	Default
characters	The max amount of characters (0 for unlimited)	100
countUp	Wether the counter counts forwards (up) or backwards (down from characters)	true
container	HTML container for the char counter	'<p></p>'
format	The text to display when counting backwards	'(%1 characters remaining)'
formatUp	The text to display when counting forwards	'(%1 characters)'
pulse	Wether to "pulse" when char limit reached (try it!)	true
delay	Delay (in ms) prior to updating char counter text	0
enterSubmits	Enables textarea submit on pressing the Enter key	true
classname	HTML class name	'charcounter'

Based on

Tom Deater's character_counter: http://www.tomdeater.com/jquery/character_counter/
Copyright 2007 Tom Deater (http://www.tomdeater.com)

Mika Tuupola, Nicolas CARPi's jquery-jeditable: https://github.com/NicolasCARPi/jquery_jeditable
© 2006 Mika Tuupola, Nicolas CARPi

License

MIT, Copyright 2018 Nitzan Weidenfeld, Hippotec LTD