Char Counter & Limiter

Char Counter & Limiter

HTML

<div class="input-wrapper counter">
    <label for="input1">Input 1</label>
    <input name="input1" type="text" />
    <p class="var-count"> <span></span> / 10</p>
</div>
<div class="input-wrapper counter">
    <label for="input2">Input 2</label>
    <input name="input2" type="text" />
    
    <p class="var-count"> <span></span> / 4</p>
</div>

CSS

@charset "utf-8";
/* CSS Document */
body { background: #ddd; padding: 20px; color: #444; font-size: 12px;}
* { margin: 0px; padding: 0px;}

.input-wrapper { display: block; position: relative; margin-bottom: 10px; clear: both; overflow: auto;}
.input-wrapper label { text-align: right; display: inline-block; float: left; line-height: 28px; padding-right: 5px;}
.input-wrapper input { display: inline-block; float: left; border: 1px solid #ccc; padding: 4px; width: 250px;}
.input-wrapper .var-count { position: absolute; left: 230px; top: 6px; text-align: right; width: 60px; font-size: 10px; color: #CCC; white-space:nowrap;}

JavaScript

$(document).ready(function() {

    $('.counter').each(function(index) {

        $('.counter p span').html('0'); // set character length to 0
        $('input', this).keyup(function() {

            var CounterDiv = $(this).parent(); // 
            var Limit = $('p', CounterDiv).html().split(' / ')[1];
            var CurrentLength = $(this).val().length;

            if (CurrentLength == Limit) {

                $('p span', CounterDiv).html(CurrentLength);
                return false;

            } else if (CurrentLength > Limit) {

                var str = $(this).val();
                $(this).val(str.substring(0, str.length - 1));
                return false;

            } else {

                $('p span', CounterDiv).html(CurrentLength);

            }
        });

    });

});