Set The Maximum Number Of Characters For Text Fields - remainingchars
File Size: | 28 KB |
---|---|
Views Total: | 237 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.