Cara Membatasi Jumlah Karakter Pada input Type Number

Hi web developer! kali ini guru design akan berbagi tutorial cara membatasi jumlah karakter pada input type number, kita akan sedikit berbicara kenapa sih karakternya harus dibatasi?. kita ambil contoh kita punya input number di form kita biasanya di gunakan untuk kolom harga jika kolom harga tidak di batasi biasanya user suka kebanyakan input angka 0 (nol). Jadi, jika kita membatasi input hanya 6 karakter kemudian user meng-input lebih dari 6 karakter maka akan muncul bingkai merah yang menandakan over.

Tutorial cara membatasi jumlah karakter pada input type number

Pertama tambahkan style CSS

Dengan style css ini kita bisa membuat warna bingkai-nya berwarna, bebas memilih warnanya sesuai selera tapi kesempatan kali ini kita akan mengubah warnanya menjadi merah supaya lebih serem.

<style>
input:out-of-range {
  border:2px solid red;
}
</style>

Ket:  yang saya blok warna hijau bisa kalian ubah sesuai dengan selera, untuk memilih warna kalian bisa klik disini.

Kemudian tambahkan html inputannya

Saya akan membuat contoh saya memiliki form input harga dengan rentang min 5 karakter dan max 10 karakter.

<input type="number" min="5" max="10" value="">  

Ket: Jika kamu menginput kurang dari 5 dan lebih dari 10 maka muncul bingkai berwarna merah.

Demo

Coba ketikkan angka dalam rentang yang diberikan (antara 5 dan 10), jika lebih dari 10 maka muncul border merah.

Silahkan tanyakan di kolom komentar jika ada yang kurang mengerti.

Sekian Tutorial cara membatasi jumlah karakter pada input type number terimakasih semoga bermanfaat.