Senin, 17 April 2017

Membuat Input Hanya Angka Dengan JavaScript


Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan mencoba membuat input tetapi hanya khusus angka dan juga nanti kita coba untuk membatasi jumlah karakter yang akan di inputkan.Terkadang dalam sebuah website di perlukan sebuah inputan tetapi misalnya inputan tersebut hanya angka yang di perlukan,untuk mencegah supaya user tidak salah memasukkan data misal.Tapi di sini saya akan mencoba membuatnya dengan sederhana saja.

Disini saya akan menerapkannya pada HTML supaya lebih mudah untuk di praktekkan
<!DOCTYPE html>
<html>
<head>
<title>Membuat Inputan Angka</title>
</head>
<body>
<h1>Membuat Inputan Hanya Angka Dengan JavaScript</h1>
<h2>Tuliskan Angka Pada Form Di Bawah</h2>

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

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

</body>
</html>
 Sekarang mari coba sedikit kita bahas contoh input angka di atas

  • Buat dulu form biasa seperti pada HTML tetapi kita beri event onekeypress="" untuk membuat aksi saat form ini di beri input.
<input type="text" onkeypress="return angka(event)"/>

  • Setelah itu kita buat pengecekan bahwa yang di inputkan adalah angka.

function angka(evt){

var char = (evt.which) ? evt.which : event.keyCode
if (char > 31 &&(char < 48 || char > 57)) 
return false;
return true;
}
 Sekarang mari kita coba jalankan



Seperti gambar di atas kita hanya bisa menginputkan angka,untuk lebih jelasnya bisa di coba sendiri.Lalu selanjutnya kita coba untuk membatasi jumlah karakter yang di inputkan.

Tinggal kita rubah pada script inputnya,di sini saya membatasinya menjadi 3 karakter saja
 <input type="text" maxlength="3" onkeypress="return angka(event)"/>
Maka hasilnya akan seperti gambar di bawah


Mungkin cukup sekian postingan kali ini semoga bermanfaat bagi teman - teman semua..!

Referensi:http://www.malasngoding.com/membuat-inputan-hanya-angka-dengan-javascript/

Wassalamualaikum Wr.Wb
Share:

0 komentar:

Posting Komentar