Display Character Counter While Inserting Text with Twitter Bootstrap Jquery Plugin

0
287

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)

Display Character Counter While Inserting Text with Twitter Bootstrap Jquery Plugin

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 🙂

Previous articleSmallipop – The Best Jquery Toolptip Plugin
Next articleFacebook’s New update With Chat Heads,Stickers and revamped News feed on iPhone and iPad
Aakash Doshi
Bachelor's in Computer Science, NMIMS UNIVERSITY Currently Working as a Software Specialist in eClinicalWorks (Number 1 Electronic Medical Record Software Provider in USA). A web Addict and a Hardcore Gamer, Dreaming of "The Next Big Thing !"

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.