Membuat Input Hanya Angka dan Huruf Tertentu pada Form

Pada kasus pembuatan aplikasi atau tools Online, terkadang kita perlu membatasi aktifitas pengguna. Misalnya kita meminta pengunjung menulis angka pada kotak/ form isian milik kita, jika mereka mengisi bukan dengan angka, maka tombol tidak dapat berfungsi.

Pada pembuatan form standar, biasanya kita menggunakan <input name="Nama" type="text" size="30" />
Nah, jika kode form yang Anda buat seperti diatas, maka siapapun dapat mengisi form tersebut dengan angka maupun teks biasa bahkan ia juga dapat mengisinya dengan karakter emoticon. Jika demikian, dapat dipastikan kesalahan dalam pengisian form jauh lebih banyak. Berbeda dengan form yang dikususkan dengan input kusus teks maupun angka.

Lalu, bagaimana cara membuat form kusus tersebut ?

Anda hanya perlu menambahkan kode onKeyPress="return kodeScript(event,'abcdeABCDE',this) dibagian input form.
Bukan hanya itu, ada sedikit script yang perlu Anda tambahkan untuk mengaktifkan kodeScript.

Kode lengkapnya bisa Anda lihat dibawah:
<script language="javascript">
function getkey(e)
{
if (window.event)
   return window.event.keyCode;
else if (e)
   return e.which;
else
   return null;
}
function kodeScript(e, goods, field)
{
var key, keychar;
key = getkey(e);
if (key == null) return true;

keychar = String.fromCharCode(key);
keychar = keychar.toLowerCase();
goods = goods.toLowerCase();

// check goodkeys
if (goods.indexOf(keychar) != -1)
return true;
// control keys
if ( key==null || key==0 || key==8 || key==9 || key==27 )
   return true;
 
if (key == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
};
// else return false
return false;
}
</script>
<form method="post">
  <p>Tanggal lahir: <input name="Tanggal" type="text" size="2" onKeyPress="return kodeScript(event,'0123456789',this)" /> <input name="Bulan" type="text" size="12" onKeyPress="return kodeScript(event,'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',this)" /> <input name="Tahun" type="text" size="4" onKeyPress="return kodeScript(event,'0123456789',this)" /></p>
</form>
Keterangan:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ adalah kode untuk membuat form isian hanya bisa di isi dengan huruf besar dan kecil saja, dan 0123456789 adalah kode yang dibutuhkan untuk membuat isian form hanya dapat diisi dengan angka 0 sampai 9.
size="2" digunakan untuk mengatur lebar form.

Warning!
Trik ini belum saya coba pada peramban phonsel cerdas, namun untuk jenis browser modern seperti Google Chrome dan Mozilla Firefox masih support. dan terakhir saya coba lewat HP saya (Nokia X2) tidak suport. Silahkan Anda bereksperimen sendiri.

Kode diatas menghasilkan form seperti dibawah:
Tanggal lahir:
Namun, untuk bagian isian form, Anda juga dapat menentukan berapa banyak jumlah karakter yang boleh disi oleh pengguna. Butuh penjelasan lebih lanjut? Lihat caranya Disini.
URL

1 Tanggapan: » Lihat

waduh banyak trik bagus diblog ne, ane mau jalan2 dulu kang, siapa tau nemu yang lebih keren lagi disini. makasih ea kang :)

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini