Days
Hours
Minutes
Seconds
Tentu, berikut adalah artikel tentang cara membatasi jumlah karakter pada form input menggunakan JavaScript.
Dalam pengembangan web, kita seringkali perlu membatasi jumlah karakter yang dapat dimasukkan pengguna ke dalam sebuah form input. Meskipun HTML memiliki atribut maxlength, ada situasi di mana kita memerlukan fungsionalitas tambahan, seperti memberikan umpan balik real-time kepada pengguna tentang sisa karakter yang tersedia.
Dengan menggunakan JavaScript, kita dapat dengan mudah mengimplementasikan fungsionalitas ini untuk memberikan pengalaman pengguna yang lebih baik.
Pertama, kita akan membuat sebuah textarea dan elemen span untuk menampilkan jumlah karakter yang tersisa.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pembatasan Karakter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Ketik Komentar Anda</h2>
<textarea id="komentar" maxlength="150" rows="5" placeholder="Maksimal 150 karakter..."></textarea>
<p>Sisa karakter: <span id="sisa-karakter">150</span></p>
</div>
<script src="script.js"></script>
</body>
</html>
textarea: Elemen input di mana pengguna akan mengetik.id="komentar": Digunakan sebagai pengenal unik untuk diakses di JavaScript.maxlength="150": Atribut HTML ini sudah membatasi jumlah karakter secara otomatis. Namun, kita akan menggunakan JavaScript untuk memberikan umpan balik visual.span id="sisa-karakter": Elemen ini akan kita perbarui dengan jumlah karakter yang tersisa secara real-time.
Kita tambahkan sedikit CSS agar tampilan form lebih rapi.
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
font-size: 1em;
}
p {
text-align: right;
margin-top: 10px;
color: #555;
}
Ini adalah bagian terpenting. Kita akan menggunakan event listener untuk memantau setiap kali pengguna mengetik dan memperbarui hitungan sisa karakter.
// Dapatkan elemen-elemen DOM
const komentarElement = document.getElementById('komentar');
const sisaKarakterElement = document.getElementById('sisa-karakter');
// Tentukan batas maksimal karakter
const batasKarakter = komentarElement.getAttribute('maxlength');
// Tambahkan event listener untuk memantau input
komentarElement.addEventListener('input', function() {
// Dapatkan jumlah karakter saat ini
const jumlahKarakter = komentarElement.value.length;
// Hitung sisa karakter
const sisaKarakter = batasKarakter - jumlahKarakter;
// Perbarui teks pada elemen span
sisaKarakterElement.textContent = sisaKarakter;
// Ubah warna teks jika karakter hampir habis (opsional)
if (sisaKarakter <= 10) {
sisaKarakterElement.style.color = 'red';
} else {
sisaKarakterElement.style.color = 'green';
}
});
const komentarElement = document.getElementById('komentar');: Kita mengambil elemen textarea dari DOM berdasarkan ID-nya.const batasKarakter = komentarElement.getAttribute('maxlength');: Kita mengambil nilai maxlength dari atribut HTML. Ini adalah praktik yang baik karena kita tidak perlu menulis ulang nilai batas di JavaScript.addEventListener('input', ...): Ini adalah event listener yang akan mendeteksi setiap kali ada perubahan pada konten elemen textarea, baik itu karena ketikan, paste, atau lainnya.komentarElement.value.length: Properti .value memberikan kita isi dari textarea, dan .length memberikan jumlah karakternya.sisaKarakterElement.textContent = sisaKarakter;: Kita memperbarui konten teks dari elemen <span> dengan nilai sisaKarakter yang baru dihitung.if (sisaKarakter <= 10): Ini adalah logika opsional untuk memberikan umpan balik visual tambahan, misalnya dengan mengubah warna teks menjadi merah ketika sisa karakter kurang dari atau sama dengan 10.Dengan menggabungkan ketiga file di atas, Anda akan memiliki sebuah form input yang membatasi karakter dan memberikan umpan balik real-time yang informatif kepada pengguna. Ini adalah contoh sederhana namun efektif tentang bagaimana JavaScript dapat meningkatkan interaktivitas dan pengalaman pengguna pada sebuah halaman web.
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
