Comment implémenter la méthode d'obtention du nombre dynamique de mots restants dans la zone de texte

Je suis tombé sur un cas au travail sur lequel je n'avais jamais écrit auparavant. J'ai passé une demi-après-midi à essayer de l'écrire. Cela me semble si gris mais cela me donne aussi un sentiment d'accomplissement ! Bien sûr, cela n'a rien à voir avec un expert en js, mais c'est un petit pas en avant pour mes propres capacités en js.

Introduction au cas : nous voyons souvent que certains sites Web ont des zones de texte dans une zone de texte. Lorsque vous entrez, il y a une invite de texte sous le nombre de mots que vous pouvez saisir. Aujourd'hui, nous allons implémenter cette fonction. Bien entendu, comme une page comporte plusieurs zones de texte, il n'est pas possible d'utiliser une seule logique js pour le contrôle, et celle-ci doit être encapsulée de manière modeste. Bien sûr, il y a encore quelques défauts dans mon package, mais les fonctions de base sont réalisées.

Introduisez d'abord un seul cas d'implémentation de zone de texte

partie html :

<textarea id="text_txt1"></textarea>  
<span id ="num_txt1">剩余可输入600字</span>

partie js :

$(function(){   
   $('#text_txt1').on('keyup',function(){   
       var txtval = $('#text_txt1').val().length;   
       console.log(txtval);   
      var str = parseInt(600-txtval);   
      console.log(str);   
        if(str > 0 ){   
          $('#num_txt1').html('剩余可输入'+str+'字');   
      }else{   
          $('#num_txt1').html('剩余可输入0字');   
          $('#text_txt1').val($('#text_txt1').val().substring(0,600)); //这里意思是当里面的文字小于等于0的时候，那么字数不能再增加，只能是600个字   
        }   
        //console.log($('#num_txt').html(str));   
    });   
})

Ensuite, introduisez plusieurs cas d'implémentation de zone de texte sur la même page

function changeLength(obj,num){   
    obj.on('keyup',function(){   
    var txtval = obj.val().length;   
        //console.log(txtval);   
        var str = parseInt(600-txtval);   
        //console.log(str);   
        if(str > 0 ){   
            num.html('剩余可输入'+str+'字');   
        }else {   
            num.html('剩余可输入0字');   
            obj.val(obj.val().substring(0, 600));   
        }   
        //console.log($('#num_txt').html(str));   
    });   
}   
$(function(){ //我这里有四个，所以调用4次   
    changeLength($('#text_txt1'),$('#num_txt1'));   
    changeLength($('#text_txt2'),$('#num_txt2'));   
    changeLength($('#text_txt3'),$('#num_txt3'));   
    changeLength($('#text_txt4'),$('#num_txt4'));   
});

Bien sûr, le nombre réel de mots requis ici peut également être encapsulé dans la fonction, mais je le ferai pas l'encapsuler. De cette façon, lorsque du texte est saisi, le nombre de mots restants sera automatiquement affiché à l'intérieur de la plage. Lorsque la valeur saisie atteint la valeur maximale, le nombre de mots restants sera affiché comme 0 et le nouveau contenu ne pourra pas être rempli. Lorsque le texte est supprimé, span peut obtenir dynamiquement le nombre de mots restant.

Ce qui suit est le code d'autres personnes, cette fois j'ai aussi emprunté les méthodes d'écriture d'autres personnes

html:

<p class="family_v2">  
    <p class="nickname_v2">简介：</p>  
     <textarea id="content" name="sign" style="height:60px;overflow-y: hidden;"  
     onkeyup="changeLength(this,60)" class="nicknameBox_v2 brief_box_v2">  
     </textarea>  
     <p class="limit_num_v2">  
         <h3>60</h3>  
    </p>  
 </p>

js:

//验证textarea的长度   
function changeLength(obj,lg){   
    var len = $(obj).val();   
    $(obj).next().find("h3").text(lg-len.length);   
    if(len.length>=lg){   
        $(obj).next().find("h3").text(0);   
        $(obj).val(len.substring(0,lg));   
    }   
}

L'article ci-dessus sur la façon d'obtenir le nombre de mots restants dynamiques dans la zone de texte est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous le ferez. prend en charge le site Web chinois PHP.

Pour plus d'articles sur la façon d'obtenir le nombre de mots restants dynamiques dans la zone de texte, veuillez faire attention au site Web PHP chinois !