Cross-browser Textarea Maxlength Plugin - jQuery maxlength.js
File Size: | 13.5 KB |
---|---|
Views Total: | 1596 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A cross-browser jQuery Textarea maxlength plugin that allows to specify the maximum length of a textarea and provides a visual user feedback while typing. Similar to the HTML textarea maxlength
attribute which works on Internet Explorer 10+.
Features:
- Limits the amount of characters to be typed in the textarea.
- Auto truncates the overflowing characters.
- Character counter.
- Change the styles of your textarea when reaching the limit.
How to use it:
1. Load the necessary JavaScrilt files in your html document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.plugin.js"></script> <script src="jquery.maxlength.js"></script>
2. Initialize the plugin on the desired textarea element and done.
$('#maxLength').maxlength();
3. Override the default maximum length.
$('#maxLength').maxlength({ max: 140 // default: 200 });
4. Decide whether to truncate the text when overflowing:
$('#maxLength').maxlength({ truncate: true });
5. Decide whether to show the user feedback:
$('#maxLength').maxlength({ showFeedback: true });
6. Specify the jQuery selector, element, or jQuery object, or function for element to fill with feedback.
$('#maxLength').maxlength({ feedbackTarget: null });
7. Specify the jQuery selector, element, or jQuery object, or function for element to fill with feedback.
$('#maxLength').maxlength({ onFull: function(overflowing) { $(this).addClass(overflowing ? 'overflow' : 'full'); } });
8. The default CSS styles of the user feedback.
.maxlength-feedback { margin-left: 0.5em; font-size: 75%; } .maxlength-full { background-color: #fee; } .maxlength-overflow { background-color: #fcc; } .maxlength-disabled { opacity: 0.5; }
9. Available regional settings, indexed by language/country code
/** Localisations for the plugin. Entries are objects indexed by the language code ('' being the default US/English). Each object has the following attributes. @property [feedbackText='{r} characters remaining ({m} maximum)'] {string} Display text for feedback message, use {r} for remaining characters, {c} for characters entered, {m} for maximum. @property [overflowText='{o} characters too many ({m} maximum)'] {string} Display text when past maximum, use substitutions above and {o} for characters past maximum. */ regionalOptions: { '': { // Default regional settings - English/US feedbackText: '{r} characters remaining ({m} maximum)', overflowText: '{o} characters too many ({m} maximum)' } },
This awesome jQuery plugin is developed by kbwood. For more Advanced Usages, please check the demo page or visit the official website.