Membatasi Inputan Hanya Angka Dan Huruf Pada Text Field

Gusti Ardias Riantono April 04, 2014 Javascript 5 comments

Membatasi Inputan Hanya Angka Dan Huruf Pada Text Field - Selamat pagi sobat, pagi ini mau share sedikit tentang berbau kodingan untuk website haha baunya harum kok sobat :p. Basa basi dulu ya sekalian curhat, saya share ini karena saya juga sedang melakukan KKP (Kuliah Kerja Prakek) jadi terinspirasi untuk menulis dan berbagi. Karena script ini bisa dibilang penting juga sih bagi kalian yang sedang melakukan KKP atau lain sebagainya. Soalnya bisa dapet nilai plus kalo disidang atau dilihat orang juga hehe :D. Oke baiklah sedikit saja ya curhatnya, nah gimana sih gambaran tentang Membatasi Inputan Hanya Angka Dan Huruf Pada Text Field? Oke akan saya beritahu gambar dan contohnya dibawah ya :)

Gambar 1

Nah untuk mencoba demo dari gambar diatas kalian bisa coba dibawah ini
Input angka di field - ardiasgusty.blogspot.com Berikut script/code untuk membuat program yang ada diatas

<html>
<head>
<title>Input angka di field - ardiasgusty.blogspot.com</title>
<script language="javascript">
function getkey(e)
{
if (window.event)
   return window.event.keyCode;
else if (e)
   return e.which;
else
   return null;
}
function angkadanhuruf(e, goods, field)
{
var angka, karakterangka;
angka = getkey(e);
if (angka == null) return true;
 
karakterangka = String.fromCharCode(angka);
karakterangka = karakterangka.toLowerCase();
goods = goods.toLowerCase();
 
// check goodkeys
if (goods.indexOf(karakterangka) != -1)
    return true;
// control angka
if ( angka==null || angka==0 || angka==8 || angka==9 || angka==27 )
   return true;
    
if (angka == 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="" name="" method="post" action="">
<table width="350" border="1" cellspacing="1" cellpadding="1">
  <h3>
Entri stok buah</h3><tr>
    <td>Nama Buah :</td>
    <td><input name="Nama" type="text" id="Nama" size="30" maxlength="30" onKeyPress="return angkadanhuruf(event,'abcdefghijklmnopABCDEFGHIJKLMNOP',this)" /></td>
  </tr>
<tr>
    <td>Harga :</td>
    <td><input name="Umur" type="text" id="Umur" size="30" maxlength="100" onKeyPress="return angkadanhuruf(event,'0123456789',this)" /></td>
  </tr>
<tr>
  <td>Jumlah :</td>
    <td><input name="Nilai" type="text" id="Nilai" size="3" maxlength="3" onKeyPress="return angkadanhuruf(event,'0123456789',this)" /></td>
  </tr>
<tr>
  <td></td>
  <td>
      <input type="submit" name="button" id="button" value="Submit">
  </td>
  </tr>
</table></form></body>
</html>

Penjelasan: Untuk memanggil bagaimana hanya bisa inputan huruf yang dibatasi dan angka saja sisipkan code onKeyPress di setiap field yang ingin dibatasi

onKeyPress="return angkadanhuruf(event,'abcdefghijklmnop',this)"

Script di atas hanya boleh menginput huruf 'abcdefghijklmnop', bagaimana kalau yang hanya angka? lihat dibawah

onKeyPress="return angkadanhuruf(event,'0123456789',this)"

Sama seperti yang huruf, hanya saja setelah kata event hanya dituliskan angka saja :) Oh iya sobat, jika ada kata-kata yang salah semisal salah dalam penamaan istilahnya saya mohon maaf, saya juga masih belajar belum menjadi master hehe :) Tapi saya ingin berbagi jadi mohon dimaafkan. Jika ada pertanyaan bisa komen dibawah ya. Oke cukup sampai sini cara Membatasi Inputan Hanya Angka Dan Huruf Pada Text Field. Silahkan di aplikasikan ke program anda ya sobat, Happy coding~ Update!! Pertanyaan dari mas Andre:

Untuk menambahkan titik, tanda kutip 1 tanda kutip 2 dan lain sebagainya itu bisa. Dengan cara menggunakan kode spesial karakter atau kode yang diparse. Ini adalah contoh menambahkan tanda titik . (.), kutip 1 ' (') dan kutip 2 " ("/"):