Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable does not rely on any libraries and stays under 1KB when minified and gzipped.

View the Demo

• Install using bower: bower install Countable
• Clone the git repo: git clone [email protected]:RadLikeWhoa/Countable.git
• Copy the contents of the script directly

Countable enables live counting on <input> and <textarea> elements as well as elements that have the contenteditable attribute. Elements whose text contents cannot be edited are simply parsed once.

You can define your own callback function that Countable should use. If you don't pass such a function, the results are simply logged to the console.

<script src="js/Countable.js"></script>
<script>
  var elem = document.getElementById('field')

  new Countable(elem, function (counter) {
    alert(counter.words)
  })
</script>

Countable takes the value from an HTML element and counts paragraphs, words and characters (with and without spaces). The callback function can receive a single parameter. This parameter is an object containing all the calculated values. In the above example, counter holds all numbers returned from Countable.

counter = {
  paragraphs: 0,
  words: 0,
  characters: 0,
  all: 0
}

You can optionally change Countable's behaviour by passing an options object as the third parameter.

My name is Sacha Schmid. I'm a front-end engineer from Switzerland. I am the creator of SSGS and other open source projects.

• @epmatsw
• @craniumslows