Membatasi Jumlah Karakter Input Javascript

Membatasi Jumlah Karakter Input Javascript adalah keterampilan sederhana namun penting untuk menjaga kualitas data, mencegah error validasi, dan meningkatkan pengalaman pengguna di formulir web.

Halo teman teman, semoga kalian dalam keadaan semangat belajar coding. Pada artikel ini kodelyly.com akan membahas teknik paling efektif untuk membatasi jumlah karakter pada input dan textarea menggunakan HTML dan JavaScript, lengkap dengan contoh yang mudah dipraktikkan.

Membatasi Jumlah Karakter Input Javascript

Mengapa Perlu Membatasi Karakter?

Membatasi karakter membantu menjaga konsistensi data, mempercepat validasi, dan menghindari input yang terlalu panjang. Praktik ini juga membuat pengguna lebih paham ekspektasi karena ada umpan balik jumlah karakter yang tersisa.

Cara Paling Mudah Dengan Atribut maxlength

Atribut maxlength di HTML adalah solusi instan untuk input teks tunggal maupun textarea. Browser modern akan menghentikan pengetikan saat batas tercapai.

<!-- HTML dasar dengan maxlength -->
<label>Username</label>
<input id="username" type="text" maxlength="12" placeholder="Maksimal 12 karakter" />

<label>Bio</label>
<textarea id="bio" maxlength="160" placeholder="Maksimal 160 karakter"></textarea>

Kelebihan pendekatan ini adalah mudah dan tanpa JavaScript. Keterbatasannya, kalian tidak mendapat kontrol lanjutan seperti menampilkan penghitung sisa karakter secara dinamis atau menolak penempelan teks yang melampaui batas dengan aturan khusus.

Kontrol Lebih Lanjut Dengan JavaScript

Contoh berikut memberikan penghitung sisa karakter, memotong input saat menempelkan teks yang terlalu panjang, dan memberi status validasi.

<div style="max-width:520px">
  <label for="judul">Judul Artikel</label>
  <input id="judul" type="text" data-max="50" aria-describedby="judul-help" placeholder="Maksimal 50 karakter" />
  <small id="judul-help">Sisa <span id="judul-count">50</span> karakter</small>

  <label for="deskripsi" style="display:block;margin-top:12px">Deskripsi</label>
  <textarea id="deskripsi" data-max="160" aria-describedby="desk-help" placeholder="Maksimal 160 karakter"></textarea>
  <small id="desk-help">Sisa <span id="deskripsi-count">160</span> karakter</small>
</div>

<script>
function applyLimiter(el) {
  const max = parseInt(el.dataset.max, 10);
  const counter = document.getElementById(el.id + "-count");

  function update(value) {
    let v = value;
    if (v.length > max) v = v.slice(0, max);
    if (el.value !== v) el.value = v;
    counter.textContent = String(max - el.value.length);
    el.setCustomValidity(el.value.length > max ? "Terlalu panjang" : "");
  }

  el.addEventListener("input", () => update(el.value));
  el.addEventListener("paste", e => {
    e.preventDefault();
    const text = (e.clipboardData || window.clipboardData).getData("text");
    update(el.value + text);
  });
  update(el.value || "");
}

[...document.querySelectorAll('[data-max]')].forEach(applyLimiter);
</script>

Penjelasan singkat

1. data-max menyimpan batas per elemen agar fleksibel.
2. Fungsi update memangkas input saat perlu dan memperbarui penghitung.
3. Event paste dicegat untuk memastikan teks yang ditempel juga tunduk pada batas.

Tips SEO Dan UX

1. Tampilkan sisa karakter agar ekspektasi jelas.
2. Gunakan aria-describedby untuk aksesibilitas penghitung.
3. Untuk formulir penting, validasi sisi server tetap diperlukan.
4. Pilih batas yang wajar sesuai konteks seperti 12 untuk username atau 160 untuk ringkasan.

Tabel Perbandingan Metode

Kesimpulan

Membatasi jumlah karakter input JavaScript dapat dilakukan dengan cepat menggunakan maxlength atau dengan kontrol lebih lanjut melalui event input dan logika pemangkasan. Untuk pengalaman terbaik, kombinasikan penghitung sisa karakter di sisi klien dengan validasi sisi server agar data tetap rapi dan aman.

Sekian artikel dari kodelyly.com, semoga bermanfaat dan membantu kalian membangun formulir yang nyaman digunakan.