Bootstrap-Maxlength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Bootstrap MaxLength - Demo

Default usage

The badge will show up by default when the remaining chars are 10 or less:

$('input[maxlength]').maxlength();

Change the threshold value

Do you want the badge to show up when there are 20 chars or less? Use the threshold option:


        $('input.className').maxlength({
            threshold: 20
        });
        

Few options


        $('input.className').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "label label-success",
            limitReachedClass: "label label-danger"
        });
        

All the options

This is a complete example where all the options configured for the bootstrap-maxlength counter are setted.

Please note: if the alwaysShow option is enabled, the threshold option is ignored.


        $('input.className').maxlength({
          alwaysShow: true,
          threshold: 10,
          warningClass: "label label-success",
          limitReachedClass: "label label-danger",
          separator: ' of ',
          preText: 'You have ',
          postText: ' chars remaining.',
          validate: true
        });
        

What about textareas?

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.


        $('textarea#textarea').maxlength({
            alwaysShow: true
        });
        

Let's play with the position

The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right.
All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.


        $('input#placement').maxlength({
            alwaysShow: true,
            placement: 'top-left'
        });
        

Contributors:

Changelog

1.5.3

1.5.2

1.5.1

1.5.0

1.4.3

1.4.2

1.4.1


Fork me on GitHub