Powered By Blogger

Sabtu, 17 April 2010

Javascript Input Numeric

Kadang kita pengen buat validasi di web biar input cuman bisa angka aja. Nah di web validasi kyk gitu biasanya disimpan di javascript (CMIIW).
Nah, karena lumayan sering kepake mendingan dicatet aja ah, biar ga lupa.

Sebenernya bisa aja pake javascript framework kyk prototipe, jquery, dll. Tapi biar tahu dasar-dasar javascript, kode yang dibuat ini ngga pake javascript framework.
Cara yang digunakan adalah dengan mendeteksi nomor tombol keyboard yang ditekan (istilah kerennya "keystroke event") dengan menggunakan salah satu fungsi berikut ini keyCode, charCode atau which.
Perbedaan dari ketiga fungsi itu :
1. keyCode :
Browser compability (Semua browser, kecuali saat event onkeypress di Mozilla)
2. charCode :
Browser Compability : - Tidak disupport oleh Opera dan IE
- onkeydown dan onkeyup tidak disupport oleh google chrome, Mozilla, Safari
3. which :
Browser Compability : - Tidak disupport oleh IE

yang terjadi pada saat event ini :
1. onkeydown
event occurs when a keyboard key is pressed.
2. onkeypress
event occurs when a keyboard key is pressed or held down.
Gak semua tombol bisa ke detect, kyk tombol ini (ALT, SHIFT, CTRL, CAPS LOCK)
3. onkeyup
event occurs when a keyboard key is released.

Contoh fungsi javascriptnya kyk gini :
Kalo mau dipake pas onkeypress atau onkeydown :

function isNumeric(e){
var unicode=e.keyCode? e.keyCode : e.charCode;
if(unicode != 8 && unicode != 37 && unicode != 39 && unicode != 36 && unicode != 35) {
if(unicode <> 58)
return false;
}
}

Kalo mau dipake pas onkeyup agak ribet :D :
function valid(f) {
var re = /^[0-9]*$/;
if (!re.test(f.value)) {
//alert("Only numbers allowed!");
f.value = f.value.replace(/[^0-9]/g,"");
}
}

penjelasannya :
var re = /^[0-9]*$/;
Adalah pattern (pola) yang digunakan dalam regular expression.

Karakter ^ digunakan mencocokan awal input.
Karakter [0-9] digunakan untuk mencocokan angka.
Karakter * digunakan untuk mencocokan nol atau lebih karakter.
Karakter $ digunakan untuk mencocokan akhir inputan.

!re.test(f.value)
Adalah fungsi yang digunakan untuk mengetes apakah string yang diberikan cocok dengan regular expression, dan mengembalikan nilai true jika cocok dan false jika tidak.
/[^0-9]/g
Karakter [^0-9] berarti bukan karakter 0-9.
g dipakai untuk mengecek secara global atau karakter seterusnya.

f.value.replace(/[^0-9]/g,"");
Adalah fungsi yang digunakan untuk menghapus nilai(gampangnya) jika tidak sesuai dengan
pola.
Selesai juga nih, tulisan pertama.
Oh iya, contoh nya bisa di download disini :

Kalo mau coba event2 nya masuk aja ke alamat ini :



Tidak ada komentar:

Posting Komentar