Character Counter Including Whitespaces - Characters Caculator

An easy-to-use and developer-friendly character counter plugin that provides instant character count statistics for text fields like textarea and input.

The plugin counts the number of characters typed by the user (with or without whitespaces).

See Also:

• 10 Best Character Counters In JavaScript

How to use it:

1. Create an empty container to display the character count statistics next to your text field.

<!-- Input Field -->
<input id="basic" />
<!-- Textarea -->
<input id="basic" />

<span id="target" class="count"></span>

2. Load the jquery-characters-caculator.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/js/jquery-characters-caculator.js"></script>

3. Create a basic character counter.

$('#basic').calculate(function (length, limit) {
  (limit > 0 ? $('#target').html(`<span>${length}</span>/${limit}`) : $('#target').html(`${length}`));
});

4. Count the number of characters including whitespaces.

$('#basic').calculate(function (length, limit) {
  (limit > 0 ? $('#target').html(`<span>${length}</span>/${limit}`) : $('#target').html(`${length}`));
},{
  whitespaces: false
});

5. Show the maximum number of characters allowed to type.

$('#basic').calculate(function (length, limit) {
  (limit > 0 ? $('#target').html(`<span>${length}</span>/${limit}`) : $('#target').html(`${length}`));
},{
  limit: 140
});

---

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