11521 sujets

JavaScript, DOM et API Web HTML5

Compter les caractères d'un textarea

Bonjour à tous,
j'ai besoin de compter en temps réel les caractères d'un textarea, car j'ai mis une limite de saisie sur ce nombre.
J'ai donc trouvé un petit script js qui fait ça : 

$(document).ready(function(){
  var limitnum = 700; // set your int limit for max number of characters
  
  function limiting(obj, limit) {
    var cnt = $("#counter > span");
    var txt = $(obj).val(); 
    var len = txt.length;
    
    // check if the current length is over the limit
    if(len > limit){
       $(obj).val(txt.substr(0,limit));
       $(cnt).html(len-1);
     } 
     else { 
       $(cnt).html(len);
     }
     
     // check if user has less than 20 chars left
     if(limit-len <= 20) {
     	$(cnt).addClass("warning");
     }
  }

  $('textarea').keyup(function(){
    limiting($(this), limitnum);
  });
});


Je colle ensuite mon petit bout de code sous mon textarea concerné dans mon HTML : 

<textarea rows="8" maxlength="700" required="required" class="form-control py-3 reverse" placeholder="Résumé du texte (en Français, 700 caractères MAX)"></textarea>
<div id="counter"><span>0</span> caractères (700 max)</div>


C'est nickel, ça fonctionne.

MAIS... (forcément, il y a un "mais...")
J'ai bien compris que ce comptage se fait sur la base du textarea qui se trouve sur ma page, car c'est lui qui est ciblé dans cette fonction. Or, j'ai plusieurs textarea, et je vais avoir besoin d'associer le compteur de façon indépendante à chaque textarea concerné. Dans mon cas présent, la limite est à chaque fois de 700. Donc la limite est commune... mais le comptage doit être indépendant. Et comme je ne suis pas trop à l'aise avec le javascript, je ne sais pas comment faire cela.
Je me doute qu'il va falloir cibler différemment, avec un id unique pour chaque textarea par exemple ?
Du genre : 

<textarea id="id1" rows="8" maxlength="700" required="required" class="form-control py-3 reverse" placeholder="Résumé du texte (en Français, 700 caractères MAX)"></textarea>
<div id="counter1"><span>0</span> caractères (700 max)</div>

<textarea id="id2" rows="8" maxlength="700" required="required" class="form-control py-3 reverse" placeholder="Résumé du texte (en Français, 700 caractères MAX)"></textarea>
<div id="counter2"><span>0</span> caractères (700 max)</div>




$(document).ready(function(){
  var limitnum = 700; // set your int limit for max number of characters
  
  function limiting(obj, limit) {
    var cnt = $("#counter1 > span");
    var txt = $(obj).val(); 
    var len = txt.length;
    
    // check if the current length is over the limit
    if(len > limit){
       $(obj).val(txt.substr(0,limit));
       $(cnt).html(len-1);
     } 
     else { 
       $(cnt).html(len);
     }
     
     // check if user has less than 20 chars left
     if(limit-len <= 20) {
     	$(cnt).addClass("warning");
     }
  }

  $('textarea #id1').keyup(function(){
    limiting($(this), limitnum);
  });
});


mais je ne sais pas si ce que j'ai écrit est correct en javascript, et comment faire pour les autres cas #id2 counter2 etc...

merci de votre aide
Modérateur
Bonjour, par exemple:


// boucler sur tous les textarea
$('textarea').each(function(){
  var $this = $(this);
  // si le textarea a un attribut maxlength
  if ($this.hasAttribute('maxlength') {
    var limit = parseInt($this.attr('maxlength'), 10);
    $this.on('input', function(){
      limiting($this, limit);
    });
  }
    
  });
alors je comprends l'idée d'utiliser le maxlength, et je trouve qu'elle est bonne !
par contre, il manque le lien entre chaque compteur et chaque textarea dans ce cas, non ?
Modérateur
Ah oui, je n'avais pas vu. Il ne faut pas récupérer le compteur en absolu, mais en relatif alors:

au lieu de

var cnt = $("#counter > span");


faire un truc du genre:

var cnt = obj.next().find('span');

ou ajouter une class counter sur le compteur et faire un:

var cnt = obj.siblings('.counter').find('span');
bon alors j'ai bien fait ça au niveau du HTML : 

<textarea rows="8" maxlength="700" required="required" class="form-control py-3 reverse" placeholder="Résumé du texte (en Français, 700 caractères MAX)"></textarea>
<div id="counter" class="counter"><span>0</span> caractères (700 max)</div>


puis j'ai modifié le script

$(document).ready(function(){
  // var limitnum = 700; // set your int limit for max number of characters
  
  function limiting(obj, limit) {
    var cnt = obj.siblings('.counter').find('span');
    var txt = $(obj).val(); 
    var len = txt.length;
    
    // check if the current length is over the limit
    if(len > limit){
       $(obj).val(txt.substr(0,limit));
       $(cnt).html(len-1);
     } 
     else { 
       $(cnt).html(len);
     }
     
     // check if user has less than 20 chars left
     if(limit-len <= 20) {
     	$(cnt).addClass("warning");
     }
  }

    // boucler sur tous les textarea
    $('textarea').each(function(){
      var $this = $(this);
      // si le textarea a un attribut maxlength
      if ($this.hasAttribute('maxlength') {
        var limit = parseInt($this.attr('maxlength'), 10);
        $this.on('input', function(){
          limiting($this, limit);
        });
      }
    
    /*
    $('textarea').keyup(function(){
    limiting($(this), limitnum);
    });                       
    */
});


mais ça ne fonctionne pas... et pour l'instant je n'ai testé qu'avec un seul textarea
Sujet clos
Aller à