jQuery maxlength visual Feedback

• Bootstrap
• jQuery
• Visualize

A jQuery PlugIn that gives visual feedback about the remaining free characters according to maxlength attribute.

Standalone Demo Download latest ZIP View Project on github To jsfiddle Demo

Usage

1. Include CSS

   <link href="//cdn.jsdelivr.net/gh/gueff/jquery-maxlengthVisualFeedback@2.2/maxlengthVisualFeedback.css" rel="stylesheet"> 

2. Add CSS class maxlengthVisualFeedback to HTML Formular Tags
   and make sure your Formular Tags do have the maxlength attribute.

   <input type="text" class="maxlengthVisualFeedback" maxlength="10" name="Company">

3. Include Javascript
   We need: jQuery + maxlengthVisualFeedback

   <script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script><script src="//cdn.jsdelivr.net/gh/gueff/jquery-maxlengthVisualFeedback@2.2/maxlengthVisualFeedback.js"></script>

4. Activate

   $(".maxlengthVisualFeedback").on('click keyup keypress', function() {
   maxlengthVisualFeedback($(this));
   });                 

Supported Web Form Elements

Works for the following Web Form Elements:

• <imput type="text" ..>
• <imput type="email" ..>
• <imput type="password" ..>
• <imput type="search" ..>
• <imput type="tel" ..>
• <imput type="url" ..>
• <textarea..>
• <select..>

Note: As long as select does not provide a maxlength attribute, you need to set the HTML5 conform data-maxlength attribute.

Modifying

Change section sizes

you can change the section sizes by the init JS script. Example:

$(".maxlengthVisualFeedback").on('click keyup keypress', function() {
    maxlengthVisualFeedback($(this), 1, 80, 90);
});     

Here, the first section (lightblue) would start at 1%, the second one (orange) at 80% and the third one (lightcoral) at 90%.