Membatasi Input Field Hanya Angka atau Abjad di HTML

07.12 Gusti Ardias Riantono 0 Comments

Membatasi Input Field Hanya Angka atau Abjad di HTML - Pagi sobat, masih tahan puasa gak? baru juga sahur ya hehe. Kalian pernah tidak ketemu sama field inputan yang dibatasi? apa maksudnya dibatasi? Misal field tersebut meminta kita memasukkan nomor telpon, otomatis field tersebut hanya bisa memasukkan angka saja tidak bisa memasukkan abjad kedalam field tersebut.

Membatasi Input Field Hanya Angka atau Abjad di HTML

Seperti apa contohnya? lihat demo dibawah ini


Entri stok buah
  
  

  
    Nama Buah :  
      
  
  
    Harga :  
      
  
  
  Jumlah :

Nah kira-kira seperti itu wujud dari pembatasan field/form inputannya, bagaimana cara membuatnya? kalian bisa ambil kodenya dibawah ini

<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="harga" type="text" id="harga" size="30" maxlength="100" onKeyPress="return angkadanhuruf(event,'0123456789',this)" /></td>  
  </tr>
<tr>  
  <td>Jumlah :</td>  
    <td><input name="jumlah" type="text" id="jumlah" 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>

Sedikit penjelasan sobat, Untuk memanggil bagaimana hanya bisa inputan abjad yang dibatasi dan angka saja sisipkan code onKeyPress di setiap field yang ingin dibatasi

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

Script di atas hanya boleh menginput abjad 'abcdefghijklmnop' abjad kecil dan abjad besar (ABC), 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.
Semoga bermanfaat ya sobat~

#Sumber blog lama saya: Mari Belajar