Set The Maximum Number Of Characters For Text Fields - remainingchars

A tiny and fast jQuery plugin that allows web developers to limit the length of a text field and displays the remaining characters to prevent users from submitting forms that require more characters than can be entered into the field.

See Also:

How to use it:

1. Load the minified version of the jQuery remainingchars plugin after jQuery.

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

2. Set the maximum number of characters using the data-maxlen attribute. The plugin supports any text fields like textarea and input.

<!-- Textarea -->
<textarea id="textarea" class="remchars" data-maxlen="140"></textarea>

<!-- Input Field -->
<input class="remchars" data-maxlen="14" />

3. Call the function on the text fields and the plugin will do the rest.

(function() {
  $('.remchars').remainingChars();
})();

4. Determine whether to prevent users from typing characters when they reach the limit.

<!-- Textarea -->
<textarea id="textarea" class="remchars" data-maxlen="140" data-limitinput="true"></textarea>

<!-- Input Field -->
<input class="remchars" data-maxlen="14" data-limitinput="true" />

// OR via JavaScript
(function() {
  $('.remchars').remainingChars({
    limitinput: true,
  });
})();

5. Customize the text to show in the status area. Note that the statustext string must include a %d for being replaced with the count of remaining characters:

(function() {
  $('.remchars').remainingChars({
    statustext: 'Remaining: %d'
  });
})();

6. Apply your own styles to the error text:

.error {
  color: #f00;
}

---

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