Characters Count. jQuery. Count Up, Count Down, Character Limit

vicnumb Mar 28, 2013

Mar 28 2013 Published by under jQuery & JavaScript

Overwhelming majority of websites use forms for different purposes. Most forms use text fields or textareas. Many forms require characters counting or data limitations by the number of characters.
Characters are usually counted after form submission by the data processing languages, but along with internet development friendly interfaces became a must.

Submitting a form with character limitations user would like to know when the limit is reached before data is submitted.

As an appropriate language for creating friendly interfaces, character counting and data limitations is JavaScript and the most popular JavaScript library – jQuery.

 

If you are looking for a simpler solution, read about our JavaScript Count Down Character Counter.

On building text forms with counting characters we may need the following functionality

  • Count Characters
  • Count Words
  • Count Up (e.g. from 0 to a sertain value), Count Down (e.g. from a given value to 0)
  • Prevent user from entering more characters/words than a pre-defined number
  • Apply a CSS class or run a JavaScript (jQuery) function when the max value is achieved/exceeded
  • Bind counter to a selector
  • Possibility to setup multiple independent counters on the same page

All these features are integrated into jQuery Simply Countable plugin.

 

Count characters usage example

 

1. Setup your html code with a counter selector.

<input id="text_to_count">
<span id="counter_display"></span>

 

2. Character Counter usage

Copy the counter to the local directory. Place it to the same folder with your html file.
Note: For security reasons jQuery won’t work on your local machine unless you place it on a web server.

<script src="jquery.simplyCountable.js"></script>
<script>
$('#text_to_count').simplyCountable({
  counter: '#counter_display',
  countable: 'characters',
  maxCount: 16,  
  strictMax: true,
  countDirection: 'down',
  safeClass: 'safe',
  overClass: 'over'
});
</script>

Place together the HTML and JavaScript code in the same html file and run a counter test.

 

3. In case you wish to count data of multiple text forms, just use distinct selectors for each form

<input id="text_to_count_1">
<span id="counter_display_1"></span>
 
<input id="text_to_count_2">
<span id="counter_display_2"></span>

in the same html file, before the closing body tag

<script src="jquery.simplyCountable.js"></script>
<script>
$('#text_to_count_1').simplyCountable({
  counter: '#counter_display_1',
  countable: 'characters',
  maxCount: 16,  
  strictMax: true,
  countDirection: 'down',
  safeClass: 'safe',
  overClass: 'over'
});
 
$('#text_to_count_2').simplyCountable({
  counter: '#counter_display_2',
  countable: 'words',
  maxCount: 100,  
  strictMax: true,
  countDirection: 'down',
  safeClass: 'safe',
  overClass: 'over'
});
</script>

 

4. If you use a single form to count characters on page, you may want to use counter defaults and take advantage of simple integration

<input id="text_to_count">
<span id="counter"></span>

in the same html file, before the closing body tag

<script src="jquery.simplyCountable.js"></script>
<script>
$('#text_to_count').simplyCountable();
</script>

Simply Counter Defaults

options = $.extend({
  counter:            '#counter',
  countType:          'characters',
  wordSeparator:      ' ',
  maxCount:           140,
  strictMax:          false,
  countDirection:     'down',
  safeClass:          'safe',
  overClass:          'over',
  thousandSeparator:  ',',
  onOverCount:        function(){},
  onSafeCount:        function(){},
  onMaxCount:         function(){}
}, options);

 

5. Simply Counter list of options

  • counter – A jQuery selector to match the ‘counter’ element. Defaults to #counter.
  • countType – Select whether to count characters or words. Defaults to characters.
  • wordSeparator – The word separator when counting words. Defaults to white-space.
  • maxCount – The maximum character (or word) count of the text input or textarea. Defaults to 140.
  • strictMax – Prevents the user from being able to exceed the maxCount. Defaults to false.
  • countDirection – Select whether to count down or up. Defaults to down.
  • safeClass – The CSS class applied to the counter element when it is within the maxCount figure. Defaults to safe.
  • overClass – The CSS class applied to the counter element when it exceeds the maxCount figure. Defaults to over.
  • thousandSeparator – The separator for multiples of 1,000. Set to false to disable. Defaults to ,.
  • onOverCount – Callback function called when counter goes over maxCount figure.
  • onSafeCount – Callback function called when counter goes below maxCount figure.
  • onMaxCount – Callback function called when in strictMax mode and counter hits maxCount figure.

Feel free to share your favorite counting programs.

One response so far

Leave a Reply