Cara Menghitung Jumlah Karakter Menggunakan Jquery

Edisi tutorial bootstrap kali ini akan mengdiskusikan bagaimana cara menghitung banyaknya karakter dalam sebuah kalimat yang diinput dengan menggunakan bantuan librari Jquery.

Pernahkan anda melihat kolom komentar yang membatasi banyaknya jumlah karakter yang diizinkan ?. Nah model penghitung jumlah inputan karakter ini dapat kita gunakan dalam membatasi jumlah karakter dalam komentar tersebut. Disini kita akan menggunakan bantuan librari bootstrap-maxlength. Librari tersebutlah yang mengerjakan proses perhitungan jumlah karakter, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

jquery bootstrap-maxlength
Gambar.1

Seperti yang terlihat dari Gambar.1 diatas, disebutkan jumlah karakter yang telah kita ketik (inputkan). Yang perlu dicatat adalah bahwa spasi juga ikut dihitung.

Langkah-Langkah Menghitung Jumlah Karakter

1. Load librari bootstrap-maxlength.min.js
Agar nantinya proses perhitungan karakter dapat berfungsi, maka pastikan kita memanggil librari bootstrap-maxlength.min.js. Bagi yang menggunakan framework Bootstrap, librari ini memang dikhususkan untuk membantu Bootstrap dalam menghitung jumlah karakter.

Silahkan tempatkan 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>

 

2. Membuat Form Inputan Text Area
Langkah kedua, kita akan membuat form inputan yang terdiri dari inputan “nama” dan inputan “Deskripsi diri”. Karena bagian “Deskripsi diri” menampung kalimat, sehingga digunakan textarea. Ketika seorang user memasukkan kalimat dalam inputan “Deskripsi diri”, maka akan dihitung 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>

Script diatas akan menghasilkan form inputan seperti yang ditunjukkan oleh Gambar.2 dibawah ini:

Membuat Form dengan Bootstrap
Gambar.2

3. Menambahkan Kode Javascript
Tahap berikutnya adalah bagian inti dari perhitungan jumlah karakter dengan menambahkan kode javascript:

<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>

  

Leave a Reply

Your email address will not be published. Required fields are marked *