Tutorial kali ini kita akan Membuat Simple limit input pada textarea.. Pernahkah anda melihat limit atau batas input di textarea.. ??? ya biasa nya ada pada kotak komentar website.

Membuat limit input textarea bertujuan untuk membatasi karakter yang masuk ke dalam database, sehingga komentar dapat dibuat secara lebih efesien.  Limit komentar textarea dapat kita buat dengan mudah menggunakan javscript jquery..

Dibawah ini merupakan contoh kotak komentar yang menggunakan batas limit textarea  dengan menggunakan bootstrap.. Oya silahkan lihat link demo untuk mencoba nya terlebih dahulu.

Anda bisa mendownload script dibawah ini pada tombol download.

Demo Download

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css"> 
    .red{ color:red;}
    textarea { resize:none; }
</style>
<form action="" method="post" >
    <div class="form-group col-md-6">                                
        <label id="messageLabel" for="message">You Text content.(Suckittrees.com)</label><br />
        <textarea class="form-control input-sm" type="textarea" id="message" 
            placeholder="Text goes here" maxlength="150" rows="8"></textarea>
        <span class="help-block">
            <p id="characterLeft" class="help-block ">You have reached the limit</p>
        </span>                
    </div>
    <br style="clear:both">
    <div class="form-group col-md-2">
        <button class="form-control input-sm btn btn-danger" id="btnSubmit" 
        name="btnSubmit" type="submit" style="height:35px"> Send </button>    
    </div>
</form>
<script type="text/javascript">
$(document).ready(function(){ 
$('#characterLeft').text('150 characters left');
$('#message').keydown(function () {
var max = 150;
var len = $(this).val().length;
if (len >= max) {
    $('#characterLeft').text('You have reached the limit');
    $('#characterLeft').addClass('red');
    $('#btnSubmit').addClass('disabled');            
} 
else {
    var ch = max - len;
    $('#characterLeft').text(ch + ' characters left');
    $('#btnSubmit').removeClass('disabled');
    $('#characterLeft').removeClass('red');            
}
});    
});
</script>