Membuat input hanya angka atau huruf tertentu
Pada kasus membuat aplikasi web, kadang kita perlu Membuat input hanya angka atau huruf tertentu seperti hanya membolehkan mengisi nilai dari 1 s/d 5 atau huruf dari a s/d e atau karakter tertentu saja atau bahkan kombinasi semuanya. Berikut ini saya ingin berbagi tentang Membuat input hanya angka atau huruf tertentu dengan menerapkanya pada form html dan javascript.
Jika anda membuat sebuah formulir dengan html, standard input yang disediakan untuk membuat masukan melalui keyboard oleh pengguna adalah tipe text yang biasanya dituliskan seperti berikut :
<input name="Nama" type="text" id="Nama" size="30" maxlength="30" />
Dengan tipe text tersebut memungkinkan semua angka dari 0 s/d 9, huruf a s/d z, dan semua karakter simbol bisa diketikkan melalui isian tersebut.
Pada beberapa kasus, kita perlu membatasi input keyboard dari pengguna dengan tujuan mengurangi tingkat kesalahan pengisian. Misal pada kasus pengisian nilai yang wajib diisi angka. Dengan cara yang biasa tanpa dibatasi seperti contoh objek form diatas tadi, hal ini tidak bisa dilakukan sehingga mungkin saja secara sengaja atau tidak sengaja input yang seharusnya bentuk angka diketikkan huruf. Lihat gambar contoh form berikut :
Jika kita lihat form diatas, umur dan nilai harusnya diisi dengan angka, tapi karena tidak ada batasan maka bisa diisi dengan huruf. Ini bukan hanya menyalahi aturan tapi juga bisa membuat aplikasi yang kita buat error pada saat datanya dikirim.
Silahkan coba isi demo form berikut :
Coba isikan nama, umur dan nilai. Apa yang bisa anda isikan???
Isian nama saya batasi hanya huruf abcdeABCDE, sedangkan umur dan nilai hanya boleh diisikan angka.
Bagaimana saya Membuat input hanya angka atau huruf tertentu??
Saya mungkin tidak perlu panjang lebar jelaskan, silahkan copy code html berikut dan paste di notepad lalu simpan dalam html :
<html>
<head>
<title>Contoh Batasi Input Keyboard</title>
<script language="javascript">
function getkey(e)
{
if (window.event)
return window.event.keyCode;
else if (e)
return e.which;
else
return null;
}
function goodchars(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>
</head>
<body>
<form id="FNilai" name="FNilai" method="post" action="">
<h3>NILAI SISWA</h3>
<p>Nama : <input name="Nama" type="text" id="Nama" size="30" maxlength="30" onKeyPress="return goodchars(event,'abcdeABCDE',this)" /></p>
<p>Umur : <input name="Umur" type="text" id="Umur" size="3" maxlength="3" onKeyPress="return goodchars(event,'0123456789',this)" /></p>
<p>Nilai : <input name="Nilai" type="text" id="Nilai" size="3" maxlength="3" onKeyPress="return goodchars(event,'0123456789',this)" /></p>
</form>
</body>
</html>
Bagian javascript berisikan fungsi-fungsi yang digunakan untuk menerima semua input yang dikirimkan melalui form, kemudian menyeleksinya sesuai pengaturan yang dikirimkan. Sehingga hanya tombol angka, atau huruf saja yang dikembalikan ke form. Sedangkan dibagian tag form, anda cukup memanggilnya pada event onKeyPress dengan deklarasi :
onKeyPress="return goodchars(event,'abcdeABCDE',this)"
Tidak perlu semua objek form anda tambahkan perintah tersebut, cukup objek input yang memang dibatasi saja.
Semoga bermanfaat
Zainal Hakim
** Bebas disunting dengan menyebutkan sumber **
