jQuery maxlength visual Feedback

2018-04-22 12:30:20 Bootstrap,Visualize,jQuery

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


  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() {

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.


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%.