Highly Customizable Character/Word Counter For jQuery - Text Counter

A highly customizable text counter plugin for text fields that displays the number of words or characters have been typed or the remaining characters allowed to be typed in the input field or textarea.

More features:

• Allows to set the min/max goal for the counter.
• Fully configurable counter styles and text.
• Fully configurable error styles and text.
• Stops typing if maximum reached.
• Useful callback functions.

Install it via package managers:

# NPM
$ npm install jquery-text-counter

# Bower
$ bower install jquery-text-counter

How to use it:

1. Load the core JavaScript file textcounter.js after the latest version of jQuery library and the text counter is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="textcounter.js"></script>

2. Call the function textcounter() to create a default character counter next to the invoked text field.

$('input, textarea').textcounter();

3. Create a word counter instead of character counter.

$('input, textarea').textcounter({
  type: "word"
});

4. Countdown from maximum characters/words rather than counting up:

$('input, textarea').textcounter({
  max: 140,
  countDown: true
});

5. All default configuration options:

$('input, textarea').textcounter({

  // "character" or "word"
  'type'                      : "character",              

  // minimum number of characters/words
  'min'                       : 0,      

  // maximum number of characters/words
  // -1 for unlimited, 'auto' to use maxlength attribute                  
  'max'                       : 200,           

  // custom attribute name with the counter limit if the max is 'autocustom'
  'autoCustomAttr'              : "counterlimit",                  

  // HTML element to wrap the text count in
  'countContainerElement'     : "div",                    

  // class applied to the countContainerElement
  'countContainerClass'       : "text-count-wrapper",    

  // class applied to the counter message 
  'textCountMessageClass'       : "text-count-message",            

  // class applied to the counter length
  'textCountClass'            : "text-count",             

  // error class appended to the input element if error occurs
  'inputErrorClass'           : "error",                  

  // error class appended to the countContainerElement if error occurs
  'counterErrorClass'         : "error",                  

  // counter text
  'counterText'               : "Total Count: %d",        

  // error text element
  'errorTextElement'          : "div",                    

  // error message for minimum not met,
  'minimumErrorText'          : "Minimum not met",        

  // error message for maximum range exceeded,
  'maximumErrorText'          : "Maximum exceeded",      

  // display error text messages for minimum/maximum values
  'displayErrorText'          : true,                                    

  // stop further text input if maximum reached
  'stopInputAtMaximum'        : true,          

  // count spaces as character (only for "character" type)           
  'countSpaces'               : false,                    

  // count from maximum characters/words
  'countDown'                 : false,               

  // count down text
  'countDownText'             : "Remaining: %d",    

  // count extended UTF-8 characters as 2 bytes (such as Chinese characters)      
  'countExtendedCharacters'   : false,                 

  // count carriage returns/newlines as 2 characters
  'twoCharCarriageReturn'     : false,

  // display text overflow element
  'countOverflow'               : false,                           

  // count overflow text
  'countOverflowText'           : "Maximum %type exceeded by %d",  

  // class applied to the count overflow wrapper
  'countOverflowContainerClass' : "text-count-overflow-wrapper",   

  // maximum number of characters/words above the minimum to display a count
  'minDisplayCutoff'            : -1,           

  // maximum number of characters/words below the maximum to display a count                   
  'maxDisplayCutoff'            : -1,                              
                 
});

6. Callback functions available.

$('input, textarea').textcounter({

  // Fires when counter under max limit
  'maxunder' : function(el){},           

  // Fires when counter under min limit
  'minunder' : function(el){},

  // Fires when the counter hits the maximum word/character count
  'maxcount' : function(el){},           

  // Fires when the counter hits the minimum word/character count
  'mincount' : function(el){},           

  // Fires after the counter is initially setup
  'init' : function(el){}            

});

Changelog:

v0.9.1 (2023-05-11)

• Change assertive to polite, no need for option

v0.9.0 (2020-02-25)

• Added Accessibility support

2017-11-16

• Added AutoCustom support

2017-08-07

• Feature/text count overflow message

2017-07-30

• Version 0.6.4

---

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