Masino Sinaga

Web Development, PHPMaker, & PHP Report Maker

Anda di sini: Beranda / PHPMaker / Mudahnya Membatasi Jumlah Karakter di TextArea Aplikasi Web dari PHPMaker
Tabel yang Selalu Muat dengan Lebar Layar di Aplikasi Web dari PHPMaker
Mudahnya Mengambil Frase Bahasa Tertentu di Aplikasi Web dari PHPMaker

Mudahnya Membatasi Jumlah Karakter di TextArea Aplikasi Web dari PHPMaker

September 12, 2014 oleh Masino Sinaga 2 Komentar

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

Ditempatkan di bawah: PHPMaker Ditag dengan:Client Scripts, jQuery, PHPMaker Indonesia, Startup Script, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com dan ilovephpmaker.com.

Tabel yang Selalu Muat dengan Lebar Layar di Aplikasi Web dari PHPMaker
Mudahnya Mengambil Frase Bahasa Tertentu di Aplikasi Web dari PHPMaker

Comments

  1. alfa mengatakan

    Maret 24, 2016 pada 9:49 pm

    Malam pak masino…..bila menampilkan peringatan jumlah pesanan melebihi jumlah stok tersedia dari kolom stok dan kolom pesanan tabel order gmana caranya pak…..mohon bantuanya….trima kasih

    Balas
    • Masino Sinaga mengatakan

      Maret 26, 2016 pada 6:38 pm

      Caranya, Anda bisa menggunakan server event Row_Inserting dan/atau Row_Updating. Silahkan baca topik Server Events and Client Scripts dari menu Help PHPMaker.

      Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pos-pos Terbaru

  • Server Event Page_Render dan Page_Rendering di PHPMaker, Apa Sih Bedanya?
  • Begini Mudahnya Mengubah Judul Browser Secara Dinamis di PHPMaker 2021
  • Solusi Supaya PreviewRow dan PreviewOverlay Bisa Sama-Sama Berfungsi di PHPMaker 2021
  • Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Seperti Ini Mudahnya Menyembunyikan Data Label di Chart dari PHPMaker 2021

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Masino Sinaga pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Masino Sinaga pada Mudahnya Menambahkan Global Function untuk Auto-Update Field di PHPMaker
  • Abu Syifa pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Abu Syifa pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2019 | WordPress | Catat masuk | Kembali ke atas