Character-Count-Effect-JS

A Simple jQuery Plugin That Allows You to Create a Character Count Effect | character-counter.js

by

A simple and useful jquery plugin that allows you to create a text area character count effect with limited warning. jQuery character counter plug-in that limits the number of characters in a text box and displays the number of characters remaining to enter as you type.

How to make use of it:

1. Insert the jQuery character counter plugin’s script into the doc, after loading the newest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/character-counter.js"></script>

2. Add the CSS class to the target textbox, specify the utmost variety of characters within the chars-max and customize the CSS class of the character counter utilizing the msg-color attribute:

<!-- Textarea -->
<textarea class="count-chars" name="CharCounter" id="CharCounter" 
          maxlength="240" 
          data-chars-max="240" 
          data-msg-color="danger">
</textarea>

<!-- Input Field -->
<input type="text" class="count-chars" name="NameText" 
       maxlength="140" 
       data-chars-max="140" 
       data-msg-color="warning"
/>

3. Apply your individual kinds to the character counter.

.text-danger {
  color: red
}

.text-warning {
  color: yellow
}

Limit Textbox Length And Display Remaining Characters, Character Counter Textarea, Character Counter Input, jquery character counter Plugin/Github

See Demo And Download

Demo
Download

Official Website(akassama): Click Here

This superior jQuery/javascript plugin is developed by akassama. For extra Advanced Usages, please go to the official website.

Leave a Comment