Remaining Character Counter jQuery Plugin For Text Fields

File Size: 6.07 KB
Views Total: 1222
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Remaining Character Counter jQuery Plugin For Text Fields

Remaining Characters is a lightweight jQuery plugin that handles the maxlength attribute of your text field (input or textarea) and displays the remaining character count to the end user. It also has the ability to prevent users from typing when the amount of characters has reached the upper limit.

How to use it:

1. First you need to use the maxlength attribute to specify the maximum number of characters allowed in the <input> or <textarea> element.

<input type="text" id="my-input" maxlength="30"></textarea>
<textarea id="my-textarea" maxlength="140"></textarea>

2. Then place jQuery library and the jQuery Remaining Characters' JS files at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="remaining_characters.js"></script>

3. Active the Remaining Character Counter on the text fields as this:

$("textarea,input").remainingCharacters();

4. Default plugin options.

$("textarea,input").remainingCharacters({
  label: {
    tag: 'p',
    id: null,
    class: 'char-counter',
    invalidClass: 'error'
  },
  text: '{n}'
});

5. Apply your own CSS styles to the character counter.

.char-counter { ... }

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