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'
        });
        

Changelog

1.7.0

• Restructured distribution files position from root folder to /dist folder

1.6.1

• Added more tests around the functionalities of the plugin.
• Fixed issues around the alwaysShow option

1.6.0

• Added new custom events: maxlength.reposition, maxlength.shown, maxlength.hidden. Thanks to dr-nick.
• Buped up required jQuery to 1.9.x
• Added option placement for custom placement handler. Thanks to Kreegr
• Extended message option. Now it can also be optionally a function. Thanks to Vincent Pizzo

1.5.7

• Fixed issue with bower

1.5.6

• Added over maxlength functionality with customMaxAttribute
• Added twoCharLinebreak option

1.5.5

• Implemented input event rather than keydown to improve usability
• Fixed jshint, jscs errors

1.5.4

• When an input with associated maxlength element is removed, maxlength is also removed.

1.5.3

• Fixed #40, error on resize event.

1.5.2

• Fixed #44 (pasted text in can cause it to go over the max length)

1.5.1

• Added self protection of multiple focus events
• Added back detection of window resizing

1.5.0

• Removed window.resize
• Maxlenght is created and destroyed each time
• Fixed Doesn't update the limit after input's maxlength attribute was changed ( #31 )
• Added Gruntfile
• Added qunit unit tests

1.4.3

• Added message option, thanks to gg
• Added UFT8 option, thanks to Abdullah Al
• Fixed z-index in modal windows Issue #23

1.4.2

• Fixed issue with counting when the user moves with shift+tab keyboard shortcut.
• Replaced the warningClass limitReachedClass options to use labels rather than badges for Bootstrap 3.0 better compatibility.

1.4.1

• Added support for TAB key when the maxlength is reached.