Days
Hours
Minutes
Seconds
Tentu, ini adalah artikel untuk tutorial JavaScript Anda, yang membahas cara membuat form input hanya menerima angka.
Dalam pengembangan web, seringkali kita perlu memastikan bahwa data yang dimasukkan oleh pengguna sesuai dengan format yang kita inginkan. Salah satu contoh umum adalah ketika kita membutuhkan input berupa angka, seperti nomor telepon, usia, atau jumlah produk. Jika pengguna memasukkan huruf, maka akan terjadi kesalahan pada validasi atau pemrosesan data.
Pada tutorial ini, kita akan belajar bagaimana cara membatasi input pada sebuah form HTML agar hanya bisa menerima angka menggunakan JavaScript.
Pertama, kita akan membuat struktur dasar form input di file HTML kita. Kita akan menggunakan elemen <input type="text"> karena ini adalah jenis input yang paling fleksibel untuk dimanipulasi dengan JavaScript. Kita akan menambahkan atribut id agar mudah diakses dari JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Hanya Angka</title>
</head>
<body>
<h1>Input Hanya Angka</h1>
<label for="inputAngka">Masukkan Angka:</label>
<input type="text" id="inputAngka" placeholder="Hanya angka diperbolehkan">
<script src="script.js"></script>
</body>
</html>
Perhatikan bahwa kita menyertakan file JavaScript (script.js) di akhir <body> agar semua elemen HTML sudah dimuat sebelum skrip dijalankan.
Ada beberapa cara untuk memvalidasi input, tetapi salah satu metode yang paling efektif adalah menggunakan event listener pada event input. Event ini akan terpicu setiap kali ada perubahan pada nilai input.
Kita akan menggunakan event.target.value untuk mendapatkan nilai input saat ini. Kemudian, kita akan menggunakan metode replace() untuk menghapus semua karakter yang bukan angka.
Berikut adalah kode JavaScript (script.js) yang diperlukan:
// Dapatkan elemen input berdasarkan ID-nya
const inputElement = document.getElementById('inputAngka');
// Tambahkan event listener untuk event 'input'
inputElement.addEventListener('input', function(event) {
// Dapatkan nilai input saat ini
let nilaiInput = event.target.value;
// Hapus semua karakter yang BUKAN angka (menggunakan Regular Expression)
let nilaiBersih = nilaiInput.replace(/[^0-9]/g, '');
// Perbarui nilai input dengan nilai yang sudah bersih
event.target.value = nilaiBersih;
});
const inputElement = document.getElementById('inputAngka');: Baris ini memilih elemen input kita dari HTML menggunakan ID-nya.inputElement.addEventListener('input', function(event) { ... });: Ini adalah event listener. Kode di dalam fungsi ini akan dieksekusi setiap kali pengguna mengetik, menempel, atau menghapus sesuatu dari input.let nilaiBersih = nilaiInput.replace(/[^0-9]/g, '');: Ini adalah bagian intinya. Kita menggunakan metode replace() dengan sebuah Regular Expression (/[^0-9]/g).
[^0-9] artinya “cocokkan setiap karakter yang bukan (^) angka dari 0 sampai 9″.g adalah flag yang berarti “global”, jadi akan mencocokkan dan mengganti semua karakter yang tidak sesuai, bukan hanya yang pertama.event.target.value = nilaiBersih;: Setelah kita mendapatkan nilai yang bersih (hanya angka), kita menimpanya kembali ke dalam input. Hal ini akan secara instan menghapus karakter non-angka yang baru saja diketik pengguna.
keydown)
Metode lain yang bisa digunakan adalah membatalkan event keydown jika tombol yang ditekan bukan angka. Ini memiliki keunggulan karena karakter yang salah tidak akan pernah muncul di input.
const inputElement = document.getElementById('inputAngka');
inputElement.addEventListener('keydown', function(event) {
// Dapatkan kode tombol yang ditekan
const key = event.key;
// Periksa apakah tombol yang ditekan adalah angka (0-9), atau tombol kontrol
// seperti backspace, delete, tab, atau panah
const isNumber = /^[0-9]$/.test(key);
const isControlKey = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(key);
// Jika tombol yang ditekan BUKAN angka dan BUKAN tombol kontrol, maka batalkan event
if (!isNumber && !isControlKey) {
event.preventDefault();
}
});
keydown: Lebih cepat karena mencegah karakter yang salah muncul sama sekali, tetapi bisa lebih rumit karena harus memperhitungkan tombol-tombol kontrol seperti Backspace dan Arrow Keys.input: Lebih sederhana dan sangat efektif, karena ia menangani semua kasus (ketik, tempel, hapus) secara konsisten.
Membuat form input hanya menerima angka adalah tugas yang umum dan penting. Dengan JavaScript, kita dapat melakukannya dengan mudah dan efektif. Metode replace() dengan event input adalah cara yang sangat direkomendasikan karena kesederhanaan dan kemampuannya menangani berbagai jenis input, termasuk saat pengguna menempel teks dari clipboard.
Dengan menerapkan teknik ini, Anda dapat meningkatkan pengalaman pengguna dan memastikan data yang Anda terima selalu dalam format yang benar.
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
