Char Counter & Limiter 2

Char Counter & Limiter 2

by MrTest

HTML

<div class="input-wrapper counter">
    <label for="input1">Input 1</label>
    <input name="input1" type="text" maxlength="8" />
    <p class="var-count"> <span></span> / 8</p>
</div>
<div class="input-wrapper counter">
    <label for="input2">Input 2</label>
    <input name="input2" type="text" maxlength="4" />
    
    <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() {

            $(this).parent().find('.var-count').text($(this).val().length + " / "  + $(this).attr('maxlength'));
            
        });

    });

});