Simple jQuery Characters & Words Counter Plugin - Simply Countable

Simply Countable is yet another jQuery based character/word/text counter for your text input or textarea.

Features:

• Simple and easy to use
• Limits the maximum character (or word) count of the text input or textarea
• Supports countDown or countUp events
• Supports callback functions
• Prevents the user from being able to exceed the maxCount
• Highly configurable with CSS and javascript

Related plugins:

• jQuery Character Counter and Limit Plugin - wChar
• Simple Char Counter For Inputs and Textareas
• Char Counter and Limiter Plugin - Charlimiter
• Twitter-Like Text Area Character Counter
• jQuery Character Counter and Limit Plugin For Bootstrap
• Simple Live Character Counter with Javascript - Countable

Basic usage:

1. Include the latest jQuery library and jQuery Simply Countable on your web page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.simplyCountable.js"></script>

2. Create the html

<p>You have <span id="counter"></span> characters left.</p>
<textarea id="demo1" cols="50" rows="4"></textarea>

3. Call the plugin

<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#demo1').simplyCountable();
});
</script>

4. All the options

<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#demo1').simplyCountable({
    counter:            '#counter', // A jQuery selector to match the 'counter' element.
    countType:          'characters', // characters or words
    maxCount:           140, // The maximum character (or word) count of the text input or textarea. 
    strictMax:          false, // Prevents the user from being able to exceed the maxCount. 
    countDirection:     'down', // Select whether to count down or up. Defaults to down.
    safeClass:          'safe', // The CSS class applied to the counter element when it is within the maxCount figure. 
    overClass:          'over', // The CSS class applied to the counter element when it exceeds the maxCount figure. 
    thousandSeparator:  ',', //  The separator for multiples of 1,000. 
    onOverCount:        function(count, countable, counter){},
    onSafeCount:        function(count, countable, counter){},
    onMaxCount:         function(count, countable, counter){}
});
});
</script>

 

---

This awesome jQuery plugin is developed by MikeCostello. For more Advanced Usages, please check the demo page or visit the official website.