Membatasi karakter keyboard dengan javascript

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 Laughing 

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

 

DEMO

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!