jQuery Character Counter/Limiter For Textarea - characterCounter.js

Just another lightweight yet highly customizable jQuery character counter plugin which helps you create a live-updating character counter for your textarea elements.

Main features:

• Shows remaining characters in your textarea.
• Prevents typing when reaching the max number of characters.
• Customizable messages.
• Lots of configuration options.

How to use it:

1. Place the jquery.charactercounter.js script after the latest jQuery library as follow:

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

2. Initialize the plugin and we're ready to go.

$('textarea').characterCounter();

3. Set the maximum number of characters using data-max-chars on the textarea element:

<textarea data-max-chars="140"></textarea>

4. Or by passing the maxChars parameter to the characterCounter()'s option object.

$('textarea').characterCounter({
  maxChars: 140
});

5. Customize the messages:

$('textarea').characterCounter({
  maxChars: 140,
  postCountMessage: "characters left",
  postCountMessageSingular: "character left",
  zeroRemainingMessage: "No characters left",
  overrunPreCountMessage: "Please remove",
  overrunPostCountMessage: "characters",
  overrunPostCountMessageSingular: "character",
});

6. Apply your own CSS styles to the messages:

.me-character-counter { ... }

.me-character-counter_valid { ... }

.me-character-counter_invalid { ... }

7. All default configuration options.

$('textarea').characterCounter({

  // default CSS classes
  elementClass: "me-character-counter",
  validClass: "me-character-counter_valid",
  invalidClass: "me-character-counter_invalid",

  // Maximum allowed characters
  maxChars: Infinity,                

  // Minimum allowed characters
  minChars: 0,                        

  // Element to use for counter. If null, creates one.
  counterElement: null,              

  // if true, overruns will be positive not negative 
  positiveOverruns: false,  

  // Specifically count newlines as two characters rather than relying on the browser's count.          
  newLinesAsTwoChars: true,  

  // custom messages         
  postCountMessage: null, 
  preCountMessage: null,
  postCountMessageSingular: null, 
  preCountMessageSingular: null,
  zeroRemainingMessage: null,  
  overrunPostCountMessage: null,
  overrunPreCountMessage: null, 
  overrunPostCountMessageSingular: null,      
  overrunPreCountMessageSingular: null 
  
});

Change log:

2017-09-04

• Add callable methods

---

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