Menghitung jumlah kata dalam sebuah kalimat dapat kita gunakan dalam sebuah aplikasi penghitung sisa karakter. Misalnya dalam sebuah form inputan kita batasi jumlah inputan karakter sebanyak 150 karakater, maka dengan bantuan sebuah Jquery dapat memperingati kita berapa jumlah karakter yang sudah diinputkan dan begitu karakter sudah memenuhi batas maksimal, maka kita sudah tidak dapat menginput lagi.
Nah dalam tutorial ini, kita menggunakan librari bootstrap-maxlength. Librari tersebutlah yang melakukan proses perhitungan jumlah karakter, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Dari Gambar.1 diatas terlihat jumlah karakter yang sudah kita input. Yang perlu menjadi perhatian bahwa spasi dianggap juga sebuah karakter yang dihitung.
Langkah-Langkah Menghitung Jumlah Karakter
1. Memanggil Librari Bootstrap-Maxlength.
Agar proses perhitungan jumlah karakter dapat berfungsi, maka harus dipanggil librari bootstrap-maxlength. Librari ini memang merupakan librari javascript yang dikhususkan untuk membantu Bootstrap dalam menghitung jumlah karakter.
Letakkan librari tersebut diantara kode tag <head>..</head> seperti contoh berikut :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>Dalam langkah kedua ini, form inputan terdiri dari inputan "nama" dan inputan "Deskripsi diri". Pada bagian form inputan "Deskripsi Diri" akan menghitung jumlah karakter yang telah dimasukkan.
<div class="container">
<div class="row">
<div class="col-md-5"
<form>
<div class="form-group">
<label>Nama:</label>
<input type="text" name="name" class="form-control" >
</div>
<div class="form-group">
<label>Deskripsi diri:</label>
<textarea class="form-control" maxlength="150" style="height:125px"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>Output dari kode diatas akan terlihat seperti Gambar.2 dibawah ini :
3. Menambahkan Kode Javascript
Langkah berikutnya adalah kode javascript yang merupakan inti dari perhitungan jumlah karakter.
<script type="text/javascript">
$('textarea').maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' out of ',
preText: 'You write ',
postText: ' chars.',
validate: true
});
</script>