Wednesday , 18 October 2017
Home » CSS3 and Jquery » Display Character Counter While Inserting Text with Twitter Bootstrap Jquery Plugin

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)

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 🙂

About Aakash Doshi

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 !" Contact me

Check Also

27 unforgettable Jquery Plugins Of 2012

I have always work hard to get the best and freshest Jquery plugins roundup for …

Leave a Reply

Your email address will not be published. Required fields are marked *