Kadang dalam sebuah form yang kita buat, terdapat beberapa field yang kita inginkan hanya bisa diinput dengan karakter tertentu saja. Misalnya dalam field untuk pengisian nominal uang atau untuk menyatakan jumlah hanya bisa diinput karakter bertipe numerik saja. Masalah ini sering saya alami setiap kali membuat program khususnya yang berbasis web. Maka dari itu saya buat saja plugin jQuery sederhana ini.
Penggunaan plugin ini sangat simpel, terdapat beberapa opsi yakni:
- alpha, input string dari a..z, pilihannya true atau false, default true
- numeric, input numeric, pilihannya true atau false, default true
- space, input spasi, pilihannya true atau false, default true
- charCase, input huruf kecil atau huruf besar, pilihannya lower, upper, both.
- special, input karakter spesial. Untuk opsi ini, masukkan karakter spesial yang diperbolehkan.
- event onError, yakni event ketika karakter yang diinput tidak sesuai kriteria.
Untuk lebih jelasnya perhatikan saja pada contoh penggunaannya dibawah ini.
<html> <head> <title>Limitchar jQuery plugin</title> <script src="jquery.js"></script> <script type="text/javascript" src="jquery.limitchar.js"></script> <script type="text/javascript"> $(function(){ // hanya input teks, uppercase $('.teks').limitchar({ numeric: false, charCase: 'upper' }); $('.numeric-field').limitchar({ alpha: false, space: false, onError: function(c) { alert('Karakter "' + c + '" tidak dibolehkan!'); } }); // email field $('.email-field').limitchar({ special: '@._-', space: false }); }); </script> </head> <body> <p> <label>Hanya input teks, uppercase</label><br /> <input type="text" class="teks" /> </p> <p> <label>Hanya input numerik, alert jika karakter salah</label><br /> <input type="text" class="numeric-field" /> </p> <p> <label>Email field</label><br /> <input type="text" class="email-field" /> </p> </body> </html>
Ok mudah-mudahan plugin ini bisa membantu kawan-kawan semua. Jika ada bug atau error mohon masukannya.
Download plugin jquery.limitchar.js
February 20, 2012, 17:32
February 8, 2012, 14:39
February 1, 2012, 07:16
January 22, 2012, 16:41
January 18, 2012, 09:36
January 9, 2012, 12:18
January 8, 2012, 01:33
December 12, 2011, 19:51