Membuat Inputan Hanya Angka Dengan Javascript
Membuat Inputan Hanya Angka Dengan Javascript
Membuat Inputan Hanya Angka Dengan Javascript – Selamat datang di www.malasngoding.com. 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.
baiklah teman-teman silahkan teman-teman simak 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 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.
angka.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Membuat Inputan Hanya Angka Dengan Javascript | www.malasngoding.com</title> </head> <body> <h1>Membuat Inputan Hanya Angka Dengan Javascript</h1> <h2>www.malasngoding.com</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.
|
1 |
<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().
|
1 |
onkeypress="return hanyaAngka(event)" |
sekalian mereturn nilai dari fungsi ini.
selanjutnya teman-teman perhatikan pada function hanyaAngka().
|
1 2 3 4 5 6 7 |
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.
|
1 |
if (charCode > 31 && (charCode < 48 || charCode > 57)) |
sekarang coba jalankan pada browser.
membuat inputan hanya angka dengan javascript
dan coba di demo berikut ini.
See the Pen Membuat input hanya angka dengan javascript by Malas Ngoding (@malasngoding) on CodePen.0
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.
|
1 |
<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.
Tutorial Menarik Lainnya
Membuat Game Tebak Angka Dengan JavaScript
Fungsi Terbilang Dengan JavaScript
Membuat Show Hide Password Di HTML
Menghitung Jumlah Kata Menggunakan Javascript
selamat pagi. Saya mau bertanya. kalo mau input angka desimalnya bagaimana?