So erhalten Sie die dynamische verbleibende Wortanzahl von textarea

Dieses Mal zeige ich Ihnen, wie Sie die dynamische Restwortanzahl eines Textbereichs ermitteln und welche Vorsichtsmaßnahmen gelten, um die dynamische Restwortanzahl eines Textbereichs zu ermitteln Schauen Sie mal rein.

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. Es fühlt sich so düster an und fühlt sich dennoch wie eine Errungenschaft an. 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.

Führen Sie zunächst einen einzelnen Textbereich-Implementierungsfall ein

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

Dann führen Sie mehrere auf demselben ein Implementierungsfall für Seitentextbereich

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 benötigten Wörter auch in der Funktion gekapselt werden, aber ich werde sie 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 löscht, 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:

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

Glauben Sie es Nachdem Sie diese Fälle gelesen haben, beherrschen Sie die Methoden. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Grundkenntnisse in HTML Detaillierte Einführung in CSS-Stylesheets und Stilattribute

HTML-Einführung in allgemeine Verwendung von Meta-Tags

So verwenden Sie das href-Attribut des HTMLa-Tags, um relative Pfade und absolute Pfade anzugeben

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die dynamische verbleibende Wortanzahl von textarea. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!