Versatile jQuery Character Counter Plugin - CharacterCount.js

CharacterCount.js is a simple jQuery plugin which provides a real-time counter to display the number of alphabets, characters, numbers and spaces upon user input. Also has the ability to change the color of counter text when you have exceeded maximum character count (Default: 50).

How to use it:

1. Include jQuery Javascript library and the jQuery CharacterCount.js script in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="charactercount.js"></script>

2. Create a regular textarea in your document.

<textarea class="textinput"></textarea>

3. Create a character counter appending to the textarea you just created.

<ul class="outputbox">
  <li><span>0</span><br />
    characters</li>
  <li><span>0</span><br />
    spaces</li>
  <li><span>0</span><br />
    numbers</li>
  <li><span>0</span><br />
    alphabets</li>
</ul>

4. The sample CSS to style the character counter.

.outputbox {
  width: 100%;
  margin: 0;
  height: auto
}

.outputbox li {
  display: inline-block;
  width: 22%;
  margin: 0;
  height: 150px;
  vertical-align: top;
  text-align: center;
  font-size: 22px;
  color: #777
}

.outputbox li span {
  font-size: 50px;
  color: #70b60b
}

---

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