Membuat Inputan Hanya Menerima Angka di HTML, Macam-macam input type dalam HTML cukup beragam, salah satunya adalah type number. Type number digunakan untuk menerima inputan dari user berupa angka saja. Hal ini digunakan untuk meminimalisir jika user melakukan input data yang tidak diinginkan. Sebagai contoh, jika ingin memasukkan data berupa nomor telepon maka tidak boleh mengandung huruf atau karakter lain selain angka atau suatu jumlah barang harus diinputkan berupa angka tidak boleh karakter lain. Untuk mengatasi hal itu cukup mudah, ada cara yang paling mudah hingga menggunakan JavaScript. Cara yang akan dibagikan dalam artikel ini terdapat tiga cara, yaitu: menggunakan tag dasar dari HTML, menggunakan pattern, dan menggunakan JavaScript.
- Tag dasar HTML
Input Angka - bayusapp.com SubmitPada source code diatas terdapat code merupakan contoh penggunakan syntax dasar dari HTML yaitu type number. Pada saat melakukan input data maka input field tersebut hanya akan menerima angka saja meskipun user melakukan input berupa huruf atau karakter lain dan akan menampilkan hasil inputan hanya angka.
- Pattern
Input Angka - bayusapp.com SubmitPada source code diatas terdapat atribut pattern dalam code . Yang dimaksud pattern=”[0-9]” adalah inputan hanya menerima angka atau karakter 0 sampai 9. Meskipun saat melakukan input huruf atau karakter khusus akan tetap terinput, tapi saat dikirim akan menampilkan pesan yang kurang lebih berisi “Sesuaikan format yang diminta”. Sehingga saat dikirim atau submit tidak akan bisa karena format yang diminta atau inputnya tidak sesuai.
- JavaScript
Input Angka - bayusapp.com Submit function hanyaAngka[event] { var angka = [event.which] ? event.which : event.keyCode if [angka != 46 && angka > 31 && [angka < 48 || angka > 57]] return false; return true; }Pada source code diatas terdapat atribut onkeypress=”return hanyaAngka[event]” dalam code . Maksud dari atribut onkeypress adalah pada saat user melakukan input apapun [saat menekan keyboard], secara langsung akan memproses inputan user melalui function yang telah dibuat dalam bahasa JavaScript. Function tersebut berisi suatu code untuk melakukan pengecekan apakah input dari user tersebut berupa angka atau tidak. Jika input berupa angka, maka input tersebut akan diterima. Dan jika input selain angka, maka input tersebut tidak akan diterima.
Untuk demo dari source code diatas seperti dibawah ini
Happy Coding ^-^
- By
- 11 March 2016
- 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 | Membuat Inputan Hanya Angka Dengan Javascript| www.malasngoding.com Membuat Inputan Hanya Angka Dengan Javascript www.malasngoding.com function hanyaAngka[evt]{ var charCode=[evt.which]?evt.which :event.keyCode if[charCode>31 && [charCode < 48 || charCode > 57]] return false; return true; }
|
coba teman-teman perhatikan pada contoh syntax membuat form input angka di atas.
pertama kita buat dulu sebuah form biasa.
|
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&&[charCode57]] |
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.
|
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.
Incoming search terms:
- membuat form input dengan javascript
- membuat form dengan javascript
- cara membuat validasi form dengan javascript
- membuat inputan di javascript
- validasi angka javascript
- javascript on press huruf
- input hanya angka html
- input hanya angka javascript
- membuat inputan hanya angka di php
- cara agar hanya angka yang bisa di ketik pada text input html menggunakan javascrip