Limit Characters For Text Fields - jQuery Char Count

Char Count is a tiny jQuery plugin that limits the number of characters allowed to type in text fields and displays how many characters are left.

In addition, the plugin also has the ability to change the styles of the character count when you're about to exceed the max character limit. 

How to use it:

1. Load the JavaScript jquery.charCountPlugin.js after loading the latest jQuery library.

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

2. Specify the maximum allowed characters in the data-maxlen attribute.

<h2>Input Field</h2>
<input data-charcount="true" 
       data-maxlen="60" 
       />

<h2>Textarea</h2>
<textarea data-charcount="true" 
          data-maxlen="30">
</textarea>

3. Initialize the plugin on the text fields and done.

(function ($) {
  $(document).ready(function () {
    $('[data-charcount="true"]').charcount();
  });
})(jQuery);

4. Customize the character counter by overriding the default settings as shown below:

$('[data-charcount="true"]').charcount({
  errFontColor: 'red',
  okFontColor: 'green',
  FontWeight: 'bold',
  NumOfCharOfAlert: 20,
  isAlwaysOn: true
});

---

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