Simple jQuery Characters & Words Counter Plugin - Simply Countable
File Size: | 5.03KB |
---|---|
Views Total: | 5705 |
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:
- 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.