Cara Menghitung Jumlah Karakter text Menggunakan Jquery - NetCrot

Saat kita sedang menginput sebuah text yang panjang mungkin perlu suatu batasan jumlah text supaya data yang kita input tidak terlalu banyak sehingga dapat ditampilkan sesuai kebutuhan yang ada. Salah satu contohnya adalah twitter, kita hanya bisa membuat postingan twett sepanjang 140 karakter text saja, jadi jika melebihi batas yang sudah ditentukan maka tombol submit twett tidak bisa diklik twett tersebut.

Saya akan membagikan tutorial yang simple cara menghitung jumlah karakter Menggunakan jquery mungkin ini dapat membantu kalian untuk mengerjakan sebuah project.

Berikut tutorial cara menghitung jumlah karakter dengan jquery

1. Buatlah sebuah file index.html lalu ketikan script dibawah ini, disini saya menggunkan bootstrap.

<div class="form-group">    
 <div class="col-md-12">
  <textarea class="message form-control" rows="5" cols="30" ></textarea>
  <span class="countdown"></span>
  <button type="submit" class="btn_cut btn" id="update">
   Update
  </button>
 </div>
</div>  

2. Tambahkan script Jquery seperti berikut

$(document).ready(function ($) {
    updateCountdownAll();
    $('.message').live('input', updateCountdown);

});

function updateCountdownAll() {
    $('.message').each(function () {
        updateCountdown(this);
    });
}

function updateCountdown(e) {

    var currentElement;
    if (e.target) {
        currentElement = e.target;
    } else {
        currentElement = e;
    }

    var maxLengh = 50;
    var remaining = maxLengh - $(currentElement).val().length;
    $(currentElement).nextAll('.countdown:first').text(remaining).css('color', 'black');
 if (remaining == 0 ){
  $('.countdown:first').hide();
  $(':input[type="submit"]').removeAttr("disabled");
 }else if(remaining < 0){
  $(currentElement).nextAll('.countdown:first').text(remaining).css('color', 'red').show();
  $(':input[type="submit"]').prop('disabled', true);  
 }else{
  $(currentElement).nextAll('.countdown:first').text(remaining).css('color', 'black').show();
 }
} 

3. Jangan lupa include file jquery nya secara offline atau online dengan CDN. 

4. Jika sudah jalan kan jika berhasil tampilan nya akan seperti ini.

Cukup mudahkan proses nya anda bisa menggunakan script ini untuk berbagai kebutuhan anda seperti membuat sebuah pesan, membuat sebuah komentar atau hal lainnya. semoga bermanfaat.

Related Posts