Display Character Counter While Inserting Text with Twitter Bootstrap Jquery Plugin

Ever wanted to create a threshold counter or display number of character left  in your html text field. Bootstrap-Maxlength is one of the easiest way to display threshold counter.

Twitter Bootstrap-maxlength

This Jquery plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. It uses the HTML5 attribute “maxlength” to work.

Lets take a look at it (Wait for the animation to appear)

Demo Download Tutorial

STEP 1.
Import 2 JS Files into your HTML Header

<script src="jquery.min.js"></script> // FOR INITIATING JQUERY
<script src="bootstrap-maxlength.js"></script> // FOR INITIATING COUNTER

STEP 2.
Add Text Field or Text Area with ID and Name Attribute. Don’t forget to specify MAXLENGTH.

<input type="text" maxlength="25" name="alloptions" id="alloptions" />

<textarea id="textarea" maxlength="225" rows="2" placeholder="This textarea has a limit of 225 chars."></textarea>

STEP 3.
Declare Maxlength BootStrap in Header

<script>
$(document).ready(function(){

Insert Different functions as per the requirement here
Click Demo Button above for CODE

$('input#YOUR ID').maxlength() //This is basic without any properties
           
});
</script>

 If you have any difficulties implementing it, Do let me know in comments below 🙂