Visualize The Length Of The Input Using A Progressbar - maxlengthVisualFeedback.js

One of the most commonly used attributes in HTML forms is maxlength. Its function is to limit the number of characters that can be entered in an text field (input and textarea).

In cases where you want to give visual feedback of this limitation to the user, this plugin comes in very handy.  The maxlengthVisualFeedback plugin adds a progress bar to the text field that visually shows what is the current length of your input and makes it easy for users to not go over the limit. It's lightweight and simple, yet efficient and gets the job done.

How to use it:

1. Load the maxlengthVisualFeedback.js plugin's files in the document.

<link href="maxlengthVisualFeedback.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="maxlengthVisualFeedback.js"></script>>

2. Call the function maxlengthVisualFeedback on the target text field with the maxlength attribute and the plugin will do the rest.

<textarea
  class="form-control" 
  placeholder="Type something here..." 
  maxlength="140"
  autofocus="1" 
  autocomplete="off">
  ...
</textarea>

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

---

This awesome jQuery plugin is developed by gueff. For more Advanced Usages, please check the demo page or visit the official website.