JavaScript Chapter 8 - Membuat Inputan Angka Denga JavaScript

Nurroin's Blog - Selamat datang di Nurroin's Blog . Ditutorial JavaScript ini, kta akan membahas tentang cara membuat form inputan yang hanya memungkinkan untuk mengimput angka saja yang bisa diketik pada form ini. Jika user mengetik huruf atau karakter lain, maka tidak akan berfungsi atau yang di input tidak akan berfungsi atau yang di inputkan tidak akan muncul pada form input. Jadi form yang akan kita buat ini adalah form yang hanya mau menampung angka saja. Untuk selanjutnya, tema-teman bisa menyimak tutorial cara Membuat inputan hanya angka dengan javascript berikut ini.

Membuat Inputan Hanya Angka dengan Javascript

Terkadang di dalam membuat sebuah aplikasi atau website, kita diharuskan untuk membuat form input yang hanya memperbolehkan untuk mengimput angka. Hal ini bertujuan unutk meminimalisir kesalahan disalam sebuah aplkasi yang kita buat. Untuk cara membuat validasi angka dengan javascript silahkan teman-teman perhatikan pada penjelasan berikut.

Buatlah file html atau php terserah tema-teman. Disini saya menyediakan sebuah file dengan angka.html dimana di file ini akan kita buat validasi angka atau membuat validasi hanyah angka dengan javascript. Pertama kita akan membuat sebuah form dulu teman-teman.

angka.html

Coba teman-teman perhatikan pada contoh syntax membuat form input angka di atas.
Pertama kita buat dulu sebuah form biasa.

<input type="text" onkeypress="return hanyaAngka(event)">

Tapi di form ini kita memberikan event onkeypress"". Untuk membuat aksi pada saat form ini di ketikkan atau di inputkan. Jadi pada saat terjadi pengetikan pada form ini, maka di jalankan function hanya().

onkeypress="return hanyaAngka(event)"

Sekalian mereturn nilai dari fungsi ini.
Selanjutnya teman-teman perhatikan pada function hanya().

function hanyaAngka(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))

    return false;
    return true;
}

Disini kita melakukan pengecekan jika yang di input adalh angka, maka akan mengembalikan nilai true pada form.

if (charCode > 31 && (charCode < 48 || charCode > 57))

Sekarang coba jalankan pada browser.

hasil dari angka.html

 Hanya angka yang bisa di inputkan.

Bagaimana Membuat Batas maksimal digit angka yang di masukkan ?

Untuk Membuat maksimal angka yang di masukkan teman-teman tinggal menambahkan atribut maxlength pada element form tersbut. contohnya.

<input type="text" maxlength="2" onkeypress="return hanyaAngka(event)"/>

nah, Pada Contoh di atas berarti kita hanya membolehkan 2 digit angka yang di input.  Selanjutnya tidak akan bisa terketik lagi pada form.

Kesimpulan
Oke teman-teman cukup sekian dulu tutorialnya , semoga bermanfaat bagi tema-teman, jika dapat kesulitan, kalian bisa bertanya dengan  mengisi di kolom komentar. 


TUTORIAL BELAJAR JAVASCRIPT LAINNYA

• Javascript Chapter 1 : Pengertian dan Pengenalan Javascript
• Javascript Chapter 2 : Penulisan dan Cara Penggunaan Javascript
• Javascript Chapter 3 : Mengenal Variabel Javascript
• Javascript Chapter 4 : Operator Aritmatika Javascript
• Javascript Chapter 5 : Mengenal Tipe Data Javascript
• Javascript Chapter 6 : Membuat Function Javascript
• Javascript Chapter 7 : Mengenal Event pada Javascript
• Javascript Chapter 8 : Membuat Inputan Angka
• JavaScript Chapter 9 : Menampilkan Tanggal dengan Javascript
• Javascript Chapter 10 : Switch Case di Javascript
• Javascript Chapter 11 : Perulangan For pada Javascript