jQuery maxlength visual Feedback

2018-02-17 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%.

This website uses Cookies to provide you with the best possible service. Please see our Privacy Policy for more information. Click the check box below to accept cookies. Then confirm with a click on "Save".