Membuat inputan hanya angka dengan javascript
Terkadang dalam pembuatan website atau aplikasi dimana di dalamnya hanya terdapat form inputan angka saja dan untuk inputan yang lain tidak bisa, dengan tujuan agar meminimalisir kesalahan website atau aplikasi yang kita buat.
Contoh.
<!DOCTYPE html>Perhatikan contoh di atas
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<h1>Membuat Inputan Hanya Angka Dengan Javascript</h1>
<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>
Pertama kita buat form biasa terlebih dahulu.
<input type="text" onkeypress="return hanyaAngka(event)"/>tapi di dalam form ini saya memberikan event onkeypress. Untuk membuat aksi pada saat form di ketikkan atau di inputkan. Flasback pada materi sebelumnya yaitu event pada javascript, jadi pada saat terjadi pengetikan pada form ini, maka akan di jalankan function hanyaAngka().
onkeypress="return hanyaAngka(event)silahkan me return nilai fungsi ini.
Selanjutnya kita perhatikan pada function hanyaAngka()
function hanyaAngka(evt) {disini kita akan melakukan pengecekan jika yang di input adalah angka, maka akan mengembalikan nilai true pada form.
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57))Kita cek browser kita apakah berjalan sesuai dengan keinginan atau tidak.
Bagaimana membuat batas maksimal digit angka yang di masukkan.?
Untuk membuat maksimal inputan digit angka kita masukkan atribut maxlegth pada element form tersebut.
<input type="text" maxlength="2" onkeypress="return hanyaAngka(event)"/>Pada contoh diatas hanya bisa memasukkan 2 digit angka yang bisa di inputkan pada form tersebut.
Referensi : www.malasngoding.com
Tidak ada komentar :
Posting Komentar