Filter Angka mengunakan OnKeydown() dengan Javascript

5
(2)

Pada suatu form, terdapat berbagai macam inputan. Baik itu huruf dan angka atau alfa numeric, huruf saja, angka saja, dan custom termasuk spesial karakter didalamnya seperti !@#$%^. Namun yang kita bahas kali ini adalah bagaimana sih cara untuk memfilter inputan agar hanya dapat diketikkan angka saja. Kita mengguanakn fungsi onkeydown() untuk menjalankan fungsi tersebut. Onkeydown() ini sendiri akan berfungsi ketika keyboard ditekan. Baiklah, pertama kita buat dahulu file bernama filterAngka.html kemudian kita tuliskan fungsi onkeydown() pada element input field. Begini sebaris codenya.

 
<input type="text" class="form-control" name="ponsel" placeholder="Ponsel" onkeydown="return isNumber(event)">
 

Pada code di atas, terlihat fungsi onkeydown dengan nama isNumber. Selanjutnya kita menuliskan code javascript pada bagian bawah yang nantinya berfungsi untuk memanggil filter angka ini. Untuk penamaan pada javascript ini bebas Kamu yang tentukan. Namun ditulisan ini saya menggunakan isNumber. Begini code penulisannya:

 
  function isNumber(event) {
    if (event) {
      var charCode = (event.which) ? event.which : event.keyCode;
      if (charCode == 190 || charCode > 31 && //TITIK JUGA TIDAK BOLEH
        (charCode < 48 || charCode > 57) 
        && charCode != 8 && charCode != 46 && 
        charCode != 96 && charCode != 97 && charCode != 98 && charCode != 99 && charCode != 100//numlock menyala
        && charCode != 101 && charCode != 102 && charCode != 103 && charCode != 104 && charCode != 105
        && charCode !=37 && charCode !=38
        )
      return false;
    }
    return true;
  }  
 

Nah setelah selesai, sekarang kita buka ada browser nama file yang telah kita buat, yakni filterAngka.html dan Kamu coba pada element text field tersebut apakah sudah berhasil? Apabila telah berhasil, Kamu hanya bisa mengetikkan karakter Angka saja pada element tersebut. Kamu juga dapat melihat hasilnya dengan menekan tombol hasilnya pada bagian bawah artikel ini. Mudah bukan? Giliran Kamu mencobanya

Seberapa bermanfaat postingan ini?

Klik bintang sebagai rating vote

Rating rata-rata 5 / 5. Jumlah vote 2

Tidak ada vote selama ini

Be the first to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*