20 Juni 2016 - 04:16:39 - Read: 610

Native Javascript - Prevent Typing Non-Numeric in Input Form

Yarp, bukan topik baru buat para experienced programmer, tapi selalu jadi awal dari masalah baru bagi para programmer pemula. Bagaimana cara mencegah inputan selain angka misalnya pada form input nomor telpon? Menggunakan HTML5 selain belum semua browser support, tags input "type=number" masih belum bisa mencegah inputan selain angka, minimal dari sisi interface di client. Mau gak mau harus dihandle menggunakan javascript.

Untuk fungsi validasi sendiri kita bisa menggunakan fungsi semacam ini

function isInt(v){
  	return (parseInt(v) == v);
}
function numOnly(e){
  	var nv=''
  	var pt=false;
  	for (x=0; x<e.value.length; x++){
		c = e.value.substring(x,x+1);
		if (isInt(c) || ((c == '') && (pt == false)) || ((x == 0) && (c == '-'))){
      		nv += c;
      		if (c == '.') { pt=true; }
    	}
  	}
  	e.value = nv;
}

Akan tetapi untuk mencegah ketikan secara realtime, kita harus mencegahnya pada saat event "onKeyboard" seperti "onkeypress", "onkeyup", atau "onchange". Sehingga dengan memanggil fungsi diatas ketika event "onKeyboard" dieksekusi, validasi "number only" bisa kita lakukan. Penerapan seperti pada contoh dibawah ini

function inNumOnly(el){
	CZ("#"+el).addEventListener("keypress", function (evt) {
		if (evt.which < 48 || evt.which > 57){
			evt.preventDefault();
		}
	});	
}

Dengan mendeteksi kode ascii keyboard, fungsi diatas hanya memperbolehkan karakter dengan kode ascii antara 48 sampai dengan 57. Atau dalam decimal 0 sampai 10.

Akan tetapi masalah baru pada fungsi diatas adalah karakter yang akan dicegah termasuk kode ascii untuk meta Key seperti tombol Delete, Tab, termasuk kode ascii 8 untuk backspace. Sehingga untuk mengatasi hal ini adalah dengan menambahkan kondisi untuk selain karakter pada key tersebut.

function inNumOnly(el){
	CZ("#"+el).addEventListener("keypress", function (evt) {
		if ((evt.which < 48 || evt.which > 57) && (evt.which !== 8 || evt.metaKey) && (evt.which > 40 < evt.which)){
			evt.preventDefault();
		}
	});	
}

Dengan begini input yang diperbolehkan hanyalah angka [0-9], dan metaKey serta tanda panah untuk mengarahkan pointer. Yarp, segini aja deh tutorial buat programmer pemula only :)

Btw, operasi penggunaan DOM pada script ini menggunakan CZ.Script yang bisa didownload di http://cafelinux.info/inc/js/CZ.Script-1.0.3.min.js

Happy Scripting ^_^