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

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


Diese Website verwendet Cookies, um Ihnen den bestmöglichen Service zu gewährleisten. Weiterführende Informationen finden Sie in unserer Datenschutzerklärung. Klicken Sie in die nachfolgende Checkbox um Cookies zu akzeptieren. Bestätigen Sie anschließend durch Klick auf "Speichern".