Simple Live Character Counter with Javascript - Countable

Countable is a simple and independent javascript library that adds a character counter to your html elements (like text field) to for live paragraph-, word- and character-counting.

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

How to use it:

1. The required Mark html structure.

<div class="demo">
<textarea cols="50" rows="15" autofocus id="countableArea" placeholder="Start entering some text here"></textarea>
<ul class="result">
<li><strong>Paragraphs: </strong><span id="result__paragraphs">0</span></li>
<li><strong>Words: </strong><span id="result__words">0</span></li>
<li><strong>Characters: </strong><span id="result__characters">0</span></li>
<li><strong>Characters (with spaces): </strong><span id="result__all">0</span></li>
</ul>
</div>

2. Download and nclude the Countable library on your web page

<script src="Countable.js"></script> 

3. The javascript to activate the counter.

var area = document.getElementById('countableArea'),
    results = {
      paragraphs: document.getElementById('result__paragraphs'),
      words: document.getElementById('result__words'),
      characters: document.getElementById('result__characters'),
      all: document.getElementById('result__all')
    }

new Countable(area, function (counter) {
  if ('textContent' in document.body) {
    results.paragraphs.textContent = counter.paragraphs
    results.words.textContent = counter.words
    results.characters.textContent = counter.characters
    results.all.textContent = counter.all
  } else {
    results.paragraphs.innerText = counter.paragraphs
    results.words.innerText = counter.words
    results.characters.innerText = counter.characters
    results.all.textContent = counter.all
  }
})

Changelog:

v3.0.1 (2018-06-11)

• Update

---

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