Skip to content

HippotecLTD/realworld_jquery_jeditable_charcount

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Real World JQuery Jeditable Char Counter

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

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/realworld_jquery_jeditable_charcount@1.0.0/dist/jquery.jeditable.charcounter.realworld.min.js"></script>
<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/realworld_jquery_jeditable_charcount@1.0.0/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