Simple jQuery Characters & Words Counter Plugin - Simply Countable

Simple jQuery Characters & Words Counter Plugin - Simply Countable
File Size: 5.03KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.