M-binary
Tu écris des descriptions, tweets, messages ou publications et tu veux savoir si tu dépasses la limite ? Voici un compteur de caractères moderne et esthétique, que tu peux intégrer dans n’importe quel projet web : formulaire de contact, éditeur de texte, ou même outil SEO personnel.
Ce composant indique le nombre de caractères restants, change de style quand tu t’approches de la limite, et s’adapte à tous les écrans. Tu peux aussi le transformer facilement en compteur de mots ou de lignes.
Code HTML (structure de base)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compteur de caractères</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="counter-container">
<h1>Compteur de caractères</h1>
<textarea id="text-input" placeholder="Tape ton texte ici..." maxlength="200"></textarea>
<div class="progress-wrapper">
<svg height="100" width="100">
<circle cx="50" cy="50" r="45" stroke="#333" stroke-width="6" fill="none"/>
<circle id="progress-circle" cx="50" cy="50" r="45" stroke="#00ff88" stroke-width="6" fill="none" stroke-linecap="round"/>
</svg>
<span id="char-count">0 / 200</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Code CSS (style moderne et responsive)
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", sans-serif;
background-color: #121212;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.counter-container {
background-color: #1e1e1e;
padding: 2rem;
border-radius: 16px;
width: 90%;
max-width: 400px;
text-align: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
textarea {
width: 100%;
height: 120px;
border: none;
border-radius: 10px;
padding: 1rem;
font-size: 16px;
resize: none;
outline: none;
background: #2a2a2a;
color: white;
}
.progress-wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 1.5rem auto 0;
}
svg {
transform: rotate(-90deg);
}
#progress-circle {
stroke-dasharray: 282.6;
stroke-dashoffset: 282.6;
transition: stroke-dashoffset 0.3s linear, stroke 0.3s;
}
#char-count {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 16px;
color: #ffffff;
}
Code JavaScript (comptage en temps réel)
const textarea = document.getElementById('text-input');
const charCount = document.getElementById('char-count');
const progressCircle = document.getElementById('progress-circle');
const maxChars = parseInt(textarea.getAttribute('maxlength'));
const circleLength = 2 * Math.PI * 45; // r = 45
function updateCounter() {
const currentLength = textarea.value.length;
const percent = currentLength / maxChars;
const offset = circleLength * (1 - percent);
charCount.textContent = `${currentLength} / ${maxChars}`;
progressCircle.style.strokeDashoffset = offset;
// Changement de couleur si limite atteinte
if (currentLength >= maxChars) {
progressCircle.style.stroke = "#ff5555";
} else {
progressCircle.style.stroke = "#00ff88";
}
}
textarea.addEventListener('input', updateCounter);
window.addEventListener('DOMContentLoaded', updateCounter);
⚙️ Fonctionnalités incluses
• 🧮 Mise à jour en temps réel du nombre de caractères
• 🎨 Alerte visuelle quand la limite est proche ou dépassée
• 📱 Design responsive sur mobile et tablette
• 💬 Idéal pour les limites de Twitter, SMS, SEO, etc.
• 🧑💻 Facile à personnaliser (limite, couleurs, texte)
•
📦 Télécharge ou copie/colle le code complet ci-dessous pour commencer à l’utiliser dans tes projets. Tu peux changer le style, le texte, ou même le transformer en éditeur markdown ou bloc-notes.
💡 Astuce : tu peux aussi utiliser ce compteur pour limiter un champ de saisie dans un formulaire en JavaScript natif, sans plugin externe.