contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membatasi Karakter input Textarea di Bootstrap

Posted in Tutorial Bootstrap Life at 20 Juli 2018 With 0 Comments


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.

membatasi input textarea di bootstrap

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>

 

 

Artikel Rekomendasi

Artikel Terkait

Diskusi