Simple Live Character Counter with Javascript - Countable

Simple Live Character Counter with Javascript - Countable
File Size: 11.8KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

How to use it:

1. 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 Countable on your web page

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

3. The javascript

<script>
      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
        }
      })
</script>

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