Character Countdown In The Text Field - jQuery character-counter.js

A simple and configurable character countdown/counter plugin that shows and restricts the number of characters allowed to be typed in the text field by the user.

Supports both input field and textarea element. Also compatible with the latest Bootstrap framework.

How to use it:

1. Insert the main JavaScript file character-counter.js after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="src/character-counter.js"></script>

2. Attach the character countdown to an input field and specify the maximum number of characters as follow:

<input type="text" id="inputDemo">

$('#inputDemo').characterCounter({
  max: 10 // default: 100
});

3. To prevent typing when the users reach the limit, you must specify the the maximum number of characters in the maxlength attribute:

<input type="text" id="inputDemo" maxlength="10">

4. Attach the character countdown to a textarea element:

<textarea id="textareaDemo" cols="30" rows="5" maxlength="140">
  
</textarea>

$('#textareaDemo').characterCounter({
  max: 140,
  textArea: true
});

5. Customize the opacity and text color of the character countdown.

$('#inputDemo').characterCounter({
  max: 10,
  opacity : ".9",
  color : "red"
});

---

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