<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form role="form"> <fieldset> <div class="form-group"> <label for="exampleInputEmail1">Previous input</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Comment</label> <textarea class="form-control" id="comment" maxlength="200" rows="5"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Next input</label> <input type="text" class="form-control"> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset> </form> </div> </div> </div>

.inputlengthlabel-container { position: relative; } .inputlengthlabel-container .inputlengthlabel-label { position: absolute; bottom: 0; left: 0; padding: 0.5em 1em; border-radius: 0.25em; font-weight: bold; font-size: 80%; color: #fff; } .inputlengthlabel-container .inputlengthlabel-info { background-color: #5bc0de; } .inputlengthlabel-container .inputlengthlabel-warn { background-color: #f0Ad4e; } .inputlengthlabel-container .inputlengthlabel-danger { background-color: #d9534f; }

// delayed execution $(function() { $('#comment').inputLengthLabel(); }); // module inputLengthLabel // Carlos C Soto <eclipxe13@gmail.com> (function ($) { "use strict"; // module definition $.fn.inputLengthLabel = function (options) { // setup options if (options === undefined || 'Object' !== typeof options) { options = $.fn.inputLengthLabel.defaults; } if (this.attr('maxlength')) { options.maxlength = this.attr('maxlength'); } if (this.attr('data-lengthlabel-threshold')) { options.threshold = this.attr('data-lengthlabel-threshold'); } options = $.extend({}, $.fn.inputLengthLabel.defaults, options); options.classcontainer = options.classprefix + 'container'; options.classlabel = options.classprefix + 'label'; options.classinfo = options.classprefix + 'info'; options.classwarn = options.classprefix + 'warn'; options.classdanger = options.classprefix + 'danger'; // create container var container, element, fnkeypress; container = $(document.createElement('div')).addClass(options.classcontainer).insertBefore(this); element = $(document.createElement('span')).addClass(options.classlabel).appendTo(container); this.appendTo(container); // define trigger function fnkeypress = function () { var ml, tp, ts, cl; ml = this.attr('maxlength'); if (isNaN(ml) || ml < 0) { ml = options.maxlength; if (ml > 0) { this.attr('maxlength', ml); } } tp = this.attr('data-lengthlabel-threshold'); if (isNaN(tp) || tp < 0 || tp > 1) { tp = options.threshold; this.attr('data-lengthlabel-threshold', tp); } ts = Math.round(ml * tp); cl = $(this).val().length; element.text((ml > 0) ? cl + '/' + ml : cl); if (0 === ml || cl < ts) { if (!element.hasClass(options.classinfo)) { element.removeClass(options.classdanger + ' ' + options.classwarn).addClass(options.classinfo); } } else if (cl < ml) { if (!element.hasClass(options.classwarn)) { element.removeClass(options.classdanger + ' ' + options.classinfo).addClass(options.classwarn); } } else { if (!element.hasClass(options.classdanger)) { element.removeClass(options.classwarn + ' ' + options.classinfo).addClass(options.classdanger); } } }.bind(this); this.keyup(fnkeypress); fnkeypress(); }; // module default options $.fn.inputLengthLabel.defaults = { threshold: 0.7, maxlength: 255, classprefix: 'inputlengthlabel-' }; }(jQuery));