Character Count With Whitespace Using Jquery Form Plugin - Character Counter

Today I am going to discuss with you how to calculate a number of characters with white spaces using the JQuery script.

It is easy to use and developer-friendly character counter plugin that helps you instantly count a number of characters with whitespaces inside the TextArea and Input field.

So, How to use it:

Step:-1: Create a 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>

Step-2: Load the jquery-characters-calculator.js after JQuery.

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

Step-3: Create a basic character counter.

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

Step-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
});

Step-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
});

Please share this article and if you find anything incorrect or problem WhatsApp me.