:: LUNO :: MaxLength

Maxlength

This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. For more info, please visit the plugin's site

<!-- Plugin Js -->
<script src="assets/bundles/bs-maxlength.bundle.js"></script>

<!-- HTML  -->
<input type="text" class="form-control form-control-lg mb-1" id="bs_maxlength_basic" maxlength="10">

<!-- Jquery Page Js -->
<script>    
    // basic
    $('#bs_maxlength_basic').maxlength({
        warningClass: "badge bg-primary",
        limitReachedClass: "badge bg-success"
    });
</script>

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

Threshold Example Set threshold value to show there are 20 chars or less left

Textarea Example Bootstrap maxlength supports textarea as well as inputs

Set Position example The field counter can be positioned at the top, bottom, left or right.

Image input nouislider