So implementieren Sie die Methode zum Ermitteln der dynamischen Anzahl verbleibender Wörter im Textbereich

Ich bin bei der Arbeit auf einen Fall gestoßen, über den ich noch nie geschrieben habe. Ich habe einen halben Nachmittag damit verbracht, ihn aufzuschreiben, aber er gibt mir auch das Gefühl, etwas erreicht zu haben. Für einen JS-Experten ist das natürlich nichts, aber für meine eigenen JS-Fähigkeiten ist es ein kleiner Fortschritt.

Falleinführung: Wir sehen oft, dass einige Websites Textfelder haben. Wenn Sie eingeben, wird unten eine Textaufforderung angezeigt, wie viele Wörter Sie eingeben können. Da eine Seite über mehrere Textbereiche verfügt, ist es natürlich nicht möglich, eine einzelne JS-Logik zur Steuerung zu verwenden, und diese muss auf kleine Weise gekapselt werden. Natürlich weist mein Paket noch einige Mängel auf, aber die Grundfunktionen werden erreicht.

Stellen Sie zunächst einen einzelnen Textbereich-Implementierungsfall vor

HTML-Teil:

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

JS-Teil:

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

Führen Sie dann mehrere Textarea-Implementierungsfälle auf derselben Seite ein

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

Natürlich kann die tatsächliche Anzahl der hier erforderlichen Wörter auch in der Funktion gekapselt werden, aber das werde ich tun nicht kapseln. Auf diese Weise wird bei der Eingabe von Text automatisch die verbleibende Wortanzahl innerhalb der Spanne angezeigt. Wenn der Eingabewert den Maximalwert erreicht, wird die verbleibende Wortanzahl als 0 angezeigt und es kann kein neuer Inhalt eingefügt werden. Wenn Text gelöscht wird, kann span die verbleibende Anzahl an Wörtern dynamisch abrufen.

Das Folgende ist der Code anderer Leute, dieses Mal habe ich mir auch die Schreibmethoden einiger anderer Leute ausgeliehen

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

Der obige Artikel zum Ermitteln der dynamischen Anzahl verbleibender Wörter im Textbereich ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie dies auch tun werden Unterstützen Sie die chinesische PHP-Website.

Weitere verwandte Artikel zum Ermitteln der dynamischen Anzahl verbleibender Wörter im Textbereich finden Sie auf der chinesischen PHP-Website!