BELAJAR JAVASCRIPT OVA : Membuat Inputan hanya angka

HasanOnta – Di tutorial javascript kali ini kita akan membahas tentang cara membuat form inputan yang hanya memungkinkan untuk menginput angka. artinya hanya angka saja yang bisa di ketik pada form ini. jika user mengetikkan huruf atau karakter lain, maka tidak akan berfungsi atau yang di input tidak akan muncul pada form input. jadi pada form yang akan kita buat ini adalah form yang hanya mau menampung angka saja.

Membuat Inputan Hanya Angka Dengan Javascript

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

Buat sebuah file html atau php terserah teman-teman. di sini saya menyediakan sebuah file dengan nama angka.html. di mana di file ini akan kita buat validasi angka atau membuat validasi hanya angka dengan javascript. Pertama kita akan membuat sebuah form dulu teman-teman.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Membuat Inputan Hanya Angka Dengan Javascript | HasanOnta</title>
</head>
<body>
<h1>Membuat Inputan Hanya Angka Dengan Javascript</h1>
<h2>HasanOnta</h2>
<input type="text" onkeypress="return hanyaAngka(event)"/>
<script>
function hanyaAngka(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
</body>
</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 input. coba teman-tema baca juga tutorial saya sebelumnya tentang Pengenalan event pada javascript. untuk menambah pemahaman lebih pada event javascript. jadi pada saat terjadi pengetikan pada form ini, maka akan di jalankan function hanyaAngka().

onkeypress="return hanyaAngka(event)"

sekalian mereturn nilai dari fungsi ini.
selanjutnya teman-teman perhatikan pada function hanyaAngka().

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

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

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

lalu coba jalankan file tadi di browser.

Bagaimana Membuat Batas maksimal digit angka yang di masukkan ?

Untuk membuat maksima angka yang di masukkan teman-teman tinggal menambahkan atribut maxlength pada element form tersebut. contohnya.

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

nah, pada contoh di atas berarti kita hanya memperbolehkan 2 digit angka yang di input. selanjutnya tidak akan bisa terketik pada form.
Oke teman-teman cukup sekian dulu tutorial Membuat Inputan Hanya Angka Dengan Javascript. semoga dapat bermanfaat. selamat mencoba.