Comment obtenir le nombre de mots restants dynamiques de la zone de texte

Cette fois je vais vous montrer comment obtenir le nombre de mots restants dynamique d'une zone de texte, et quelles sont les précautions pour obtenir le nombre de mots restants dynamique d'une zone de texte Voici un cas pratique, allons-y. jetez un oeil.

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. C'est si gris et pourtant si enrichissant ! 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. Elle 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-en plusieurs sur le même Cas d'implémentation de page textarea

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é à l'intérieur de la fonction, mais je ne l'encapsulerai pas. 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 supprime texte, 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:

<div 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>  
     <div class="limit_num_v2">  
         <h3>60</h3>  
    </div>  
 </div>

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));   
    }   
}

Croyez-le Après avoir lu ces cas, vous maîtrisez les méthodes. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Connaissance de base du HTML.Introduction détaillée aux feuilles de style CSS et aux attributs de style

Introduction au HTML. utilisations courantes des balises méta

Comment utiliser l'attribut href de la balise HTMLa pour spécifier des chemins relatifs et des chemins absolus

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!