Mudahnya Membatasi Jumlah Karakter di TextArea Aplikasi Web dari PHPMaker

Sebagai Web Developer, Anda mungkin pernah mengalami kesulitan ketika ingin membatasi jumlah karakter yang boleh dimasukkan oleh Pengguna ke sebuah elemen TextArea di Aplikasi Web yang Anda bangun. Biasanya hal ini terjadi saat Pengguna sedang menambah data baru atau mengubah data yang sudah ada.

Untuk mengatasi ini tentu saja kita langsung terbayang untuk menggunakan kode jQuery karena lebih simpel tapi cukup dahsyat hasilnya dibandingkan dengan kode Javascript. Sayangnya, banyak kode jQuery yang bertebaran di Internet hanya menangani saat Pengguna mengetikkan karakter saja. Ketika Pengguna memasukkan dengan cara copy and paste, maka akan tetap lolos juga seluruh karakter yang dimasukkan melebihi jumlah batas maksimal. Tentu kita tidak menginginkan kondisi yang terakhir terjadi.

Kabar baik jika Anda menggunakan PHPMaker dalam membangun Aplikasi Web tersebut. PHPMaker telah menyediakan framework yang bagus untuk menempatkan kode jQuery dari bagian Startup Script di bawah bagian Client Scripts. Kode jQuery yang akan kita gunakan di bawah ini pun sudah mengatasi jika Pengguna mencoba curang dengan menggunakan copy and paste.

Katakanlah nama Field yang menggunakan control TextArea tersebut adalah Comments, dan jumlah karakter yang ingin kita batasi hanya maksimal 30 karakter saja.

Untuk mengimplementasikan hal ini, maka cukup tambahkan kode ini ke bagian Startup Script yang masing-masing terdapat di bawah Client Scripts -> Table-Specific -> Add/Copy Page dan juga di bawah Client Scripts -> Table-Specific -> Edit Page dari project PHPMaker Anda.

// Pemanggilan plugin
$(document).ready(function() {
	$("#x_Comments").LimitCharacters({
		limit: 30,
		id_result: "counter",
		alertClass: "alert"
	});
});

// Plugin
(function($){  
 $.fn.LimitCharacters = function(options) {  
 	var defaults = {
		limit: 200,
		id_result: false,
		alertClass: false
	}
 	var options = $.extend(defaults, options);
	return this.each(function() {  
	var characters = options.limit;
	if (options.id_result != false) {
		$("#"+options.id_result).append("You have <strong>"+ characters+"</strong> characters");
	}
	$(this).keyup(function() {
		if($(this).val().length > characters) {
		$(this).val($(this).val().substr(0, characters));
		}	
		if (options.id_result != false) {
			var remaining = characters - $(this).val().length;
			$("#"+options.id_result).html("You have <strong>"+remaining+"</strong> characters");
			if(remaining <= 10) {
				$("#"+options.id_result).addClass(options.alertClass);
			} else {
				$("#"+options.id_result).removeClass(options.alertClass);
			}
		}
	});
	});  
 };  
})(jQuery);

Perhatikan bahwa PHPMaker akan selalu menambahkan prefix atau awalan x_ yang diikuti dengan nama Field untuk setiap ID, pada elemen yang terdapat di sebuah Form. Itulah mengapa di bagian pertama Anda melihat selector yang bernama x_Comments (bukan Comments saja).

Perlu untuk Anda ketahui juga, bahwa kode jQuery di atas terdiri dari dua bagian. Bagian paling atas atau Pemanggilan plugin merupakan kode utama yang menghubungkan dengan elemen TextArea yang dalam hal ini memiliki ID sebagai x_Comments. Sedangkan kode di bagian bawah atau Plugin merupakan fungsi atau istilah di jQuery disebut dengan plugin yang akan memeriksa karakter yang dimasukkan ke elemen TextArea.

Perhatikan juga bahwa di bagian kode Plugin tersebut, secara standar sudah membatasi jumlah maksimal sebanyak 200 karakter. Nilai ini adalah nilai default, jika misalnya Anda tidak mendefinisikan secara eksplisit ketika memanggil plugin tadi. Tapi dalam contoh di atas, karena kita membatasi hanya maksimal sampai 30 karakter, maka kita harus mendefinisikannya secara eksplisit dengan kode:

limit: 30

Menariknya lagi adalah, plugin jQuery yang kita gunakan tersebut sudah menangani kemungkinan jika Pengguna melakukan copy and paste data yang jumlah karakternya melebihi dari 30 karakter. Jika ini terjadi, maka sistem akan mendeteksinya dan langsung otomatis memotong hanya sampai karakter ke-30 saja yang bisa masuk ke TextArea. Karakter ke-31 dan seterusnya akan diabaikan atau dihapus dari TextArea tersebut.

Tidak hanya itu saja, plugin ini juga bahkan sudah menyediakan pilihan kepada Anda sebagai Web Developer untuk menampilkan informasi yang memberitahukan jumlah karakter yang sudah dimasukkan, melalui parameter id_result, yang dalam contoh di atas menggunakan nama selector counter.

Plugin tersebut juga dilengkapi dengan nama class yang digunakan untuk menampilkan pesan peringatan jika melebihi karakter maksimal, yang dalam contoh di atas menggunakan nama class alert.

Plugin ini saya peroleh dari website: http://www.yourinspirationweb.com/en/jquery-tips-tricks-how-to-limit-characters-inside-a-textarea/, kredit buat om Maurizio Tarchini.

Wow, keren sekali, ‘kan? 😀