Display Character Counter While Inserting Text with Twitter Bootstrap Jquery Plugin

0
3

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

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

STEP 3.
Declare Maxlength BootStrap in Header

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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