Cara Membatasi Input Number dengan JavaScript

Sumber: Source jejaknesia.com

www.jejaknesia.com – Pernahkah kamu membuat form di website dan menemukan pengguna mengisi kolom angka terlalu panjang hingga membuat tampilan berantakan? Masalah sederhana seperti ini ternyata bisa berakibat besar pada validasi data dan estetika form. Nah, dalam artikel ini kita akan membahas cara membatasi jumlah karakter pada input number menggunakan kombinasi HTML dan JavaScript secara mudah, efektif, dan rapi.

Mengapa Perlu Membatasi Jumlah Karakter?

Bayangkan kamu membuat form registrasi yang meminta pengguna memasukkan nomor telepon atau kode verifikasi. Jika input tidak dibatasi, pengguna bisa mengetik angka berlebihan, seperti 9999999999999999. Selain tampilan menjadi kacau, data pun sulit divalidasi.

Dengan membatasi jumlah karakter pada elemen <input type="number">, kamu dapat:

• Menjaga format data agar tetap konsisten.
• Mencegah input berlebihan yang tidak perlu.
• Memastikan keakuratan data yang masuk.
• Memperindah tampilan form dan meningkatkan UX (User Experience).

1. Menggunakan Atribut max dan min di HTML

Cara paling dasar untuk membatasi input angka adalah dengan memanfaatkan atribut bawaan HTML seperti max dan min. Namun, perlu diketahui bahwa atribut ini hanya membatasi nilai, bukan jumlah karakter.

Contoh Kode:

<input type="number" min="0" max="999">

Pada contoh di atas, pengguna hanya dapat memasukkan angka antara 0 dan 999. Namun, jika kamu ingin membatasi jumlah karakter, bukan nilainya, kamu memerlukan pendekatan JavaScript.

2. Membatasi Jumlah Karakter Menggunakan JavaScript

HTML tidak memiliki atribut khusus untuk membatasi jumlah karakter di type="number". Tapi kamu bisa menyiasatinya dengan menambahkan event listener di JavaScript yang akan mencegah pengguna mengetik lebih dari batas tertentu.

Contoh Implementasi:

<input type="number" id="limitNumber" placeholder="Masukkan angka" />

  const inputNumber = document.getElementById('limitNumber');
  const maxLength = 5; // Maksimal 5 karakter

  inputNumber.addEventListener('input', function() {
    if (this.value.length > maxLength) {
      this.value = this.value.slice(0, maxLength);
    }
  });

Penjelasan:

• Event listener “input” mendeteksi setiap kali pengguna mengetik sesuatu.
• Jika jumlah karakter melebihi maxLength, maka nilai akan otomatis dipotong agar sesuai batas.

3. Menggunakan Fungsi Reusable

Agar lebih efisien, kamu bisa membuat fungsi JavaScript yang bisa digunakan ulang untuk beberapa elemen sekaligus.

Contoh Fungsi Fleksibel:

<input type="number" id="nomorTelepon" placeholder="Nomor Telepon" />
<input type="number" id="kodeOTP" placeholder="Kode OTP" />

function limitInputLength(elementId, maxLength) {
  const el = document.getElementById(elementId);
  el.addEventListener('input', function() {
    if (this.value.length > maxLength) {
      this.value = this.value.slice(0, maxLength);
    }
  });
}

// Eksekusi fungsi
limitInputLength('nomorTelepon', 12);
limitInputLength('kodeOTP', 6);

Dengan cara ini, kamu dapat mengontrol beberapa input number sekaligus hanya dengan satu fungsi sederhana. Ini sangat berguna dalam proyek skala besar atau form yang kompleks.

4. Kombinasi Jumlah Karakter dan Nilai

Pendekatan terbaik adalah dengan menggabungkan keduanya. Contoh:

<input type="number" id="usia" maxlength="3" min="1" max="120" placeholder="Masukkan Usia" />

maxlength adalah untuk karakter sedangkan min max adalah untuk nilai selain angka mulai 1 sampai 120 tidak akan bisa masuk

const input = document.getElementById('usia');
const min = parseInt(input.min);
const max = parseInt(input.max);

input.addEventListener('input', function() {
  let val = parseInt(this.value);

  // Jika bukan angka, kosongkan
  if (isNaN(val)) {
    this.value = '';
    return;
  }

  // Batasi nilai
  if (val < min) this.value = min;
  if (val > max) this.value = max;
});

Dengan begitu, pengguna tidak bisa memasukkan angka lebih dari 3 digit, dan tetap berada dalam rentang 1–120.

Tips Tambahan agar Validasi Lebih Maksimal

• Gunakan atribut required agar form tidak dikirim sebelum terisi.
• Tambahkan pesan error dengan CSS atau alert jika input salah.
• Gunakan pola regex bila perlu validasi lebih kompleks (misal nomor telepon dengan format tertentu).

Membatasi jumlah karakter pada input number sangat penting untuk menjaga kualitas dan keakuratan data. Dengan kombinasi HTML dan JavaScript sederhana, kamu dapat membuat form lebih profesional, bersih, dan user-friendly.

Mulailah menerapkan praktik ini di proyekmu, terutama jika kamu bekerja dengan data numerik seperti nomor telepon, kode verifikasi, atau ID pelanggan. Ingat, validasi kecil bisa menyelamatkan kamu dari kesalahan besar!