Bonjour à tous,

j'ai fait une petite page de commentaire sur mon site, et j'ai limité la saisie à 1400 caractères. Jusqu'ici tout va bien.

Par contre, j'aimerai que lorsqu'on saute une ligne, cela retire 60 de mon décompte, et si on fait un backspace de ce retour de ligne, on récupère 60 caractères. Je ne trouve pas comment attaquer le problème, j'ai utilisé l'ami google dans tout les sens, mais rien ne correspond à ma recherche.

si je ne fais pas ça, on peut me créer 1400 lignes, ce qui peut devenir ennuyant 

Avez vous une piste ?

Merci d'avance

Voici mon code pour le décompte des caractères :

$('.ajoutInput #commentaire').keyup(function (e) {
       let keyed = 1400;
       $('#ajoutDescription span').html(keyed - $(this).val().length );
    });

...

-
Edité par Lucky13 12 avril 2021 à 12:29:26

Apparemment ma question est naze... Puis-je juste savoir pourquoi ?

Merci

Bonjour la gestion des touches sur un textarea peut se faire en posant un événement keydown et/où keyup dessus la seul différence entre les deux ces que pour le premier l'événement sera déclenché lorsque la touche et enfoncé et l'autre sera déclenché lorsque la touche et relevé, tu peut via ces événement récupéré la touche appuyé et ajouté +60 à ton compteur lorsque cela correspond à la touche entrée.

Ce qui peut être plus compliqué c'est de vérifié le backspace lorsque ceci "remonte" d'une ligne, je pense qu'il faudrait après chaque saut de ligne détecté enregistré le nombre de caractères appuyé et pour chaque backspace appuyé retiré 1 jusqu'à arrivé à 0 (le compteur d'origine qui correspond au début de la ligne) si avec un compteur 0 l'utilisateur appui sur le backspace il "remonte" d'une ligne.

Cela peut être fastidieux à mettre en place et peut ne pas fonctionné si l'utilisateur commencent à écrire plusieurs ligne et qu'il déplace le curseur dans les lignes précédentes par exemple, on va ajouté des touches appuyé pour la dernières ligne alors quand réalité il n'est pas sur cette ligne, d'autre problème (qui dépendent de la façon dont l'utilisateur utilise la zone de texte) pourrait arrivé.

Je pense pas que juste en posant des événements sur la textarea ce soit correctement détectable.

Peut être que tu peut normalizé/validé le contenu que ta envoyé l'utilisateur en "jouant" un petit avec le contenue texte qu'il ta envoyé,

en récupérant le nombre de lignes vide, non-vides en appliqué un filtre trim sur la chaîne de texte et prenant les taille des valeurs d'origine et normalizé tu devrais avoir assez d'informations pour décidé de validé où pas la saisie de l'utilisateur.

Un exemple illustratif qui récupère la valeur dans un textarea et la normalize pour obtenir plus d'information sur le contenue saisie par l'utilisateur pourrait être:

<form>
  <textarea></textarea>
  <button type="submit">
    send
  </button>
</form>

<script>

// selectionne la zone de texte de l'exemple
const textarea = document.querySelector('textarea');
// selectionne le formulaire de l'exemple
const form = document.querySelector('form');

// écoute l'envoi du formulaire
form.addEventListener('submit', event => {

    // annule le comportement par défaut
    // ici l'envoi des données à la source
    event.preventDefault();
  
  // lit la valeur dans la zone de texte
  const val = textarea.value;
  
  // la taille réél du texte (le nombre de caractères)
  // saut de ligne inclus de la zone de texte
  const size = val.length;
  
  // valeur normalizé la méthode trim retire les caractère "inutile"
  // au extrémité d'une chaîne de caractère
  // les ligne vide au extemité de la chaines sont supprimé ainsi que les espaces blancs
  // plus d'information sur la méthode trim:
  // <https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/Trim>
  const valNormalize = val.trim();
  
  // sépare le contenue texte en un tableau de lignes
  // le caractère \n correspond au code d'un saut de ligne
  // quand l'utilisateur appuie sur la touche entrée
  // tu reçois le caractère \n dans la chaîne javascript
  // plus d'information sur la méthode split:
  // <https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split>
  const lignes = val.split('\n');
  
  // récupére toutes les lignes vides dans le tableau de lignes
  // la méthode filter sur un tableau permet de filtré les éléments du tableau
  // ici on garde uniquement les element dont la taille "normalizé" et égal à 0
  // donc les lignes vide.
  // plus d'information sur la méthode filter:
  // <https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter>
  const lignesVide = lignes.filter(line => {
  	// retourne un boolean:
    // vraie si l'élément doit être conservé
    // faux si il ne faut pas le conservé
  	return line.trim().length === 0;
  });
  
  console.info(`
  	> textarea info:
    	> taille réel: ${size}
        > taille normalizé: ${valNormalize.length}
        > nombre de lignes: ${lignes.length}
        > nombre de lignes vide: ${lignesVide.length}
        > nomrbe de lignes non-vide: ${lignes.length - lignesVide.length}
  `);

});

</script>

Les références du code native utilisé:

Array filter MDN [text] [fr]

String split MDN [text] [fr]

String trim MDN [text] [fr]

Merci  à toi SamuelGaborieau3, je vais effectivement essayé avec le filtre Trim. Ca m'ouvre une piste, ce n'est pas toujours évident quand on débute !!

Bonne journée