Cara Membatasi Jumlah Karakter pada Input Number Tanpa JavaScript

Sumber: Source jejaknesia.com

www.jejaknesia.com - Pernahkah Anda membuat form HTML dan menemukan pengguna mengisi angka di luar batas yang diinginkan — misalnya, memasukkan usia “999” atau nilai “-10”? Masalah ini sering muncul ketika menggunakan tag <input type="number"> tanpa kontrol tambahan.

Kabar baiknya, Anda tidak selalu perlu JavaScript untuk mengatasinya. Dengan sedikit sentuhan CSS pintar, Anda bisa membatasi nilai input number dan memberi peringatan visual secara otomatis.

Dalam artikel ini, kita akan membahas cara praktis membatasi jumlah angka di input number hanya menggunakan properti min, max, dan pseudo-class :out-of-range. Tidak perlu kode JavaScript panjang — cukup satu baris CSS, hasilnya tetap profesional!

Mengenal Input Number di HTML

Elemen <input type="number"> digunakan untuk menerima input angka dari pengguna. Biasanya kita menambahkan atribut seperti:

• min — nilai minimum yang boleh diisi pengguna.
• max — nilai maksimum yang boleh diisi.
• step — menentukan kelipatan kenaikan atau penurunan angka.

Contohnya:

<input type="number" min="1" max="100" step="1">

Dengan atribut tersebut, browser sudah memiliki batasan dasar. Namun, jika pengguna mengetik angka di luar rentang, input tetap bisa dilakukan — hanya saja nilainya dianggap “tidak valid”.

Di sinilah CSS :out-of-range berperan.

Apa Itu Pseudo-Class :out-of-range?

Pseudo-class :out-of-range adalah fitur CSS yang otomatis aktif ketika nilai input tidak sesuai dengan rentang yang ditentukan (min dan max). Dengan ini, Anda bisa memberi efek visual — misalnya border merah atau latar belakang berbeda — tanpa menulis JavaScript sama sekali.

Sebaliknya, ada juga :in-range untuk menandai nilai yang masih valid.

Cara Membatasi Input Number Menggunakan CSS

Berikut contoh paling sederhana dan efektif:

input:out-of-range {
  border: 2px solid red;
}
input:in-range {
  border: 2px solid green;
}

<label>Masukkan usia (18 - 60):</label>
<input type="number" min="18" max="60" placeholder="Contoh: 25">

Dengan kode di atas:

• Jika pengguna mengetik 17 → border otomatis berubah merah (karena out of range).
• Jika pengguna mengetik 25 → border berubah hijau (karena valid).

Browser akan langsung menandai input tersebut tanpa perlu tambahan skrip.

Demo

Perbandingan dengan Menggunakan JavaScript

Jika menggunakan JavaScript, kode biasanya seperti berikut:

<input type="number" id="umur" min="18" max="60">

  const umur = document.getElementById('umur');
  umur.addEventListener('input', function() {
    if (this.value < 18 || this.value > 60) {
      this.style.border = "2px solid red";
    } else {
      this.style.border = "2px solid green";
    }
  });

Keduanya berfungsi sama, tetapi pendekatan CSS jauh lebih ringan, mudah dipelihara, dan bebas JavaScript. Namun, jika Anda memerlukan validasi logika kompleks (misalnya menghitung umur otomatis atau memunculkan pesan dinamis), barulah JavaScript dibutuhkan.

Demo

Kelebihan Menggunakan :out-of-range

• Tanpa JavaScript — cukup dengan CSS, kinerja situs jadi lebih cepat.
• Visual langsung — pengguna langsung tahu input salah sebelum submit.
• Kompatibilitas tinggi — didukung oleh semua browser modern.
• Mudah diimplementasikan — hanya perlu atribut min dan max.

Tips Profesional untuk Desainer Web

Agar tampilannya lebih menarik, Anda bisa menambahkan transisi halus saat input berubah status:

input {
  transition: all 0.3s ease;
}

Atau tambahkan pesan peringatan ringan menggunakan title:

<input type="number" min="10" max="50" title="Masukkan angka antara 10 hingga 50">

Membatasi jumlah karakter atau nilai pada input number sebenarnya bisa dilakukan dengan cara yang sangat sederhana. Hanya dengan satu baris CSS menggunakan pseudo-class :out-of-range, Anda sudah bisa membuat form lebih interaktif, profesional, dan aman tanpa tambahan JavaScript.

Pendekatan ini sangat ideal untuk:

• Form pendaftaran online
• Form nilai ujian atau rating
• Input data sensus
• Form validasi usia

Semakin sederhana kode Anda, semakin cepat dan efisien situs Anda berjalan. Jadi, jangan remehkan kekuatan satu baris CSS — terkadang solusi terbaik justru yang paling ringkas.