Membuat input hanya angka atau huruf tertentu

Membuat input hanya angka atau huruf tertentuPada 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 :

Contoh membatasi input

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 :

NILAI SISWA

Nama :

Umur :

Nilai :

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 **

Komentar

Halaman Lainya

  • Perbedaan javascript dan jquery
    Perbedaan antara javascript dan jquery sering menimbulkan pertanyaan, dari segi penulisan maupun penggunaanya. Berikut ini saya akan berbagi tentang apa Perbedaan javascript dan jquery tersebut.
  • Validasi form pada saat dikirim ke server dengan javascript
    Javascript merupakan bahasa pemrograman yang bejalan disisi klien dan dijalankan langsung oleh browser dikomputer yang mengakses. Semua browser yang ada sekarang dapat menjalankannya. Kali ini saya akan berbagi tentang bagaimana melakukan pengecekan/validasi form input
  • Membuat fungsi check uncheck dengan javascript
    Javascript digunakan untuk berinteraksi dengan pengguna secara langsung dengan bantuan browser. Artinya proses tidak perlu dikirimkan lagi ke server. Banyak hal yang dapat kita lakukan dengan javacript, seperti artikel berikut yaitu melakukan check atau uncheck pada checkbox yang ada pada sebuah form.

Kiriman terbaru