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)
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 🙂
