Membatasi karakter atau istilahnya Filter sudah banyak yang membahas mengenai ini khususnya javascript, akan tetapi kalian juga bisa membuat fungsi yang jauh lebih simple dan sesuai dengan keingninan pada kasus yang kalian hadapa saat melakukan pengcodean. Filter Text biasanya menggunakan jquery /mootools validate karena simple dan bagus untuk tampilannya (memberikan peringatan kepada penginput jika salah penulisan karakter). Validate itu merupakan plugin dan itu paling tidak memakan size walaupun hanya 1-5Kb saja bagaimana solusinya? kalian bisa membuat sendiri validasi sesuai dengan kebutuhan, bukannya tambah ribet? iya memang ya itung – itung belajar dan iseng – iseng saja membuatnya Hee….
Code pada Artikel ini masih sangat sederhanya tapi mungkin masih bisa berguna buat kalian
1. Buat 1 file index.html isikan seperti berikut
<script type=”text/javascript”>
function DisableKey(e,type) {
var desimal = e.charCode? e.charCode : e.keyCode; //kode karakter decimal
if(type == ‘alphabet’){
if((desimal==34 || desimal==8 || desimal==9 || desimal==32) || (desimal==45 || desimal==46 || desimal==47) ){ // jika menekan tombol Backspace, Tab, titik, slash, tanda hubung, space dan petik dua diperbolehkan
return true;
}else{
if ((desimal<65||desimal>90) && (desimal<97||desimal>122)) { //jika bukan huruf
return false; //matikan tombol
}
}
}else{
if((desimal==45 || desimal==46) || (desimal==8 || desimal==9)){ // jika menekan tombol Backspace, Tab dan titik diperbolehkan
return true;
}else{
if (desimal<48 || desimal>57) { //jika bukan angka
return false; //matikan tombol
}
}
}
}
</script>
Simple sekali bukan! gunanya apa code diatas itu akan membatasi penulisan karakter pada keyboard.
bagaimana penggunaanya? mudah
<input type=”text” name=”nama” id=”nama” class=”main_input” onkeypress=”return DisableKey(event,’alphabet’)” /> // apabila hanya karakter alphabet saja
<input type=”text” name=”telp” id=”telp” class=”main_input” onkeypress=”return DisableKey(event,”)” /> // bila hanya nomor saja
untuk karakter desimalnya silahkan lihat melalui link berikut
silahkan lihat dibawah untuk demo