Cross-browser Textarea Maxlength Plugin - jQuery maxlength.js

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.