JS moderne, EXO #6 Limiter le nombre de caractères dans un textarea
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h39
de formation
18
leçons vidéo
4
chapitres
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

JS moderne, EXO #6 Limiter le nombre de caractères dans un textarea

4.8/5 Trustpilot (1400 avis) Satisfait ou remboursé
1h39
de formation
18
leçons vidéo
4
chapitres

Continuons notre manipulation du JavaScript moderne que nous avons appris ensemble dans la série de tutos.
Il peut arriver de devoir limiter le nombre de caractères que l'utilisateur doit entrer dans un champs de formulaire.
Le cas le plus emblématique : celui de Twitter. En effet, le texte saisi ne doit pas dépasser la longueur d'un Tweet (passé de 140 à 280 signes).
Et bien c'est ce que nous allons apprendre à faire ensemble grâce à ce tuto en vidéo !

JS moderne, EXO #6 Limiter le nombre de caractères dans un textarea

Pour cet exercice pratique, nous allons voir comment il est possible de compter et de limiter le nombre de caractères au sein d'un textarea.

  • Tout d'abord nous apprendrons comment limiter le nombre de caractères d'un textarea en affichant un comptage négatif,
  • Puis, nous apprendrons à empêcher l'utilisateur de pouvoir écrire d'autres caractères dans un textarea, une fois la limite dépassée.
  • Afin d'illustrer nos nouveaux acquis, nous ferons ensembles un exercice d'application concret.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Tous les fichiers de travail sont fournis !

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Pour suivre ce cours en vidéo dans de bonnes conditions, il est recommandé de connaître : les bases du JavaScript moderne

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Compter et limiter le nombre de caractères dans un textarea
Chapitre 2
Exercice #1
Chapitre 3
Limiter physiquement le nombre de caractères autorisés
Chapitre 4
Conclusion

Table des matières

Chapitre 1 : Compter et limiter le nombre de caractères dans un textarea

15m10
 
Leçon 1Compter le nombre de caractères dans un textarea
Leçon 2Calculer la limitation du nombre de caractères
Leçon 3Si la limitation du nombre de caractères est dépassée, on écrit en rouge

Chapitre 2 : Exercice #1

1h08
 
Leçon 1Mise en place du HTML
Leçon 2Icone sur le bouton du formulaire
Leçon 3Mise en forme de la boîte qui contient le formulaire
Leçon 4Mise en forme du bouton de formulaire
Leçon 5Mise en place du fichier traitement
Leçon 6Mise en forme du formulaire
Leçon 7On vérifie que tous les champs du formulaires sont remplis
Leçon 8On compte le nombre de caractères dans le message
Leçon 9On bloque le formulaire si le nombre de caractères max est dépassé
Leçon 10Création d'une constante

Chapitre 3 : Limiter physiquement le nombre de caractères autorisés

14m05
 
Leçon 1Découverte de la fonction substring
Leçon 2Un peu plus loin
Leçon 3Retour à l'exercice précédent
Leçon 4Blocage du décompteur à 0

Chapitre 4 : Conclusion

01m04
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 11/02/2025
Merci Carl pour ce cours ! Savoir mettre en place une limitation de caractères sur un formulaire, c’est toujours utile, et franchement, ça fonctionne nickel. L’utilisation de la méthode substring() pour limiter le nombre de caractères est super intéressante. Dès que l’utilisateur tape trop de caractères, son message est automatiquement tronqué à la bonne longueur. Simple, propre, efficace ! Et en plus, le formulaire est top design… Validé à 100% ! ✅
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Alain ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 24/10/2022
Super comme toujours
Carl Brison
Carl Brison
Merci beaucoup ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 09/05/2022
Le #6 m'avait échappé. Voilà qui est réparé, toujours avec le même plaisir.
Carl Brison
Carl Brison
Merci beaucoup ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source des exercices

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
17,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h39 de vidéo • 4 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 779 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1429 tutos gratuits

Notre politique de protection des données