So erhalten Sie die dynamische Anzahl der verbleibenden Wörter im Textbereich

So erhalten Sie die dynamische Anzahl der verbleibenden Wörter im Textbereich

Ich bin bei der Arbeit auf einen Fall gestoßen, über den ich noch nie zuvor geschrieben hatte. Ich habe den halben Nachmittag damit verbracht, daran zu arbeiten, und habe ihn schließlich aufgeschrieben. Ich fühlte mich sehr erfolgreich! Natürlich ist das nichts für JS-Experten, aber es ist ein kleiner Schritt vorwärts für meine eigenen JS-Fähigkeiten.

Fallvorstellung: Wir sehen oft, dass einige Websites Textfelder haben. Wenn Sie tippen, werden unten Textaufforderungen angezeigt, die zeigen, wie viele weitere Wörter Sie eingeben können. Heute werden wir diese Funktion implementieren. Da es auf einer Seite mehrere Textbereiche gibt, ist es natürlich nicht möglich, sie mit einer einzigen JS-Logik zu steuern, sodass sie ein wenig gekapselt werden müssen. Natürlich gibt es in meiner Kapselung noch einige Lücken, aber die Grundfunktionen sind erfüllt.

Lassen Sie uns zunächst einen einzelnen Implementierungsfall für Textbereiche vorstellen.

HTML-Teil:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Textbereich   id = "text_txt1" > </ Textbereich >   
  2. < Spanne   id = "num_txt1" > 600 Zeichen verbleiben </ span >   

js-Teil:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. $( Funktion () {
  2. $( '#text_txt1' ).on( 'keyup' , Funktion (){
  3.         var txtval = $( '#text_txt1' ).val().length;
  4. Konsole.log(txtval);
  5.        var str = parseInt(600-txtval);
  6. konsole.log(str);
  7.          wenn (str > 0 ){
  8. $( '#num_txt1' ).html( 'Der Rest kann eingegeben werden' +str+ 'Zeichen' );
  9. } anders {
  10. $( '#num_txt1' ).html( '0 Zeichen verbleiben' );
  11. $( '#text_txt1' ).val($( '#text_txt1' ).val().substring(0,600)); //Das bedeutet, dass die Anzahl der Wörter nicht erhöht werden kann und nur 600 Wörter betragen kann, wenn der Text darin kleiner oder gleich 0 ist   
  12. }
  13.          //console.log($('#num_txt').html(str));   
  14. });
  15. })

Stellen Sie dann die Implementierungsfälle mehrerer Textbereiche auf derselben Seite vor

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. Funktion changeLength(obj,num){
  2. obj.on( 'keyup' , Funktion (){
  3.      var txtval = obj.val().Länge;
  4.          //Konsole.log(txtval);   
  5.          var str = parseInt(600-txtval);
  6.          //console.log(str);   
  7.          wenn (str > 0 ){
  8. num.html( 'verbleibende Eingabe' +str+ 'Wörter' );
  9. } anders {
  10. num.html( '0 Zeichen verbleiben' );
  11. obj.val(obj.val().substring(0, 600));
  12. }
  13.          //console.log($('#num_txt').html(str));   
  14. });
  15. }
  16. $( function (){ // Ich habe hier vier, also rufe ich 4 Mal auf   
  17. Länge ändern($( '#text_txt1' ),$( '#num_txt1' ));
  18. Länge ändern($( '#text_txt2' ),$( '#num_txt2' ));
  19. Länge ändern($( '#text_txt3' ),$( '#num_txt3' ));
  20. Länge ändern($( '#text_txt4' ),$( '#num_txt4' ));
  21. });

Natürlich kann man die Anzahl der hier tatsächlich benötigten Wörter auch innerhalb der Funktion kapseln, das werde ich aber nicht tun. Auf diese Weise wird beim Eingeben von Text die verbleibende Anzahl von Wörtern automatisch innerhalb des Bereichs angezeigt. Wenn der Eingabewert den Maximalwert erreicht, wird die verbleibende Anzahl von Wörtern als 0 angezeigt und es kann kein neuer Inhalt eingegeben werden. Beim Löschen von Text kann span die Anzahl der verbleibenden Wörter dynamisch ermitteln.

Unten ist der Code von anderen. Dieses Mal habe ich auch einige ihrer Schreibmethoden übernommen.

html:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   Klasse = "Familie_v2" >   
  2.      < p   Klasse = "nickname_v2" > Einführung: </ p >   
  3.       < Textbereich   id = "Inhalt"   Name = "Zeichen"   Stil = "Höhe: 60px; Überlauf-y: ausgeblendet;"   
  4.       onkeyup = "Länge ändern(diese,60)"   Klasse = "nicknameBox_v2 brief_box_v2" >   
  5.       </ Textbereich >   
  6.       < div   Klasse = "limit_num_v2" >   
  7.           < h3 > 60 </ h3 >   
  8.      </div>​​   
  9.   </div>​​   

javascript - Argumente:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. //Überprüfen Sie die Länge des Textbereichs   
  2. Funktion Längenänderung(obj,lg){
  3.      var Länge = $(obj).val();
  4. $(obj).next().find( "h3" ).text(lg-len.length);
  5.      wenn (Länge.Länge>=lg){
  6. $(obj).next().find( "h3" ).text(0);
  7. $(obj).val(len.substring(0,lg));
  8. }
  9. }

Der obige Artikel zum Ermitteln der dynamischen Anzahl verbleibender Wörter im Textbereich ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

<<:  So erstellen Sie dynamische QML-Objekte in JavaScript

>>:  So entfernen Sie Inline-Stile, die durch das Stilattribut (element.style) definiert sind

Artikel empfehlen

Beispielanweisungen für Indizes und Einschränkungen in MySQL

Fremdschlüssel Abfrage, bei welchen Tabellen der ...

Implementierungsideen für die Synchronisierung von Docker-Registry-Images

Einleitung Bisher wurden unsere Docker-Images in ...

So lösen Sie das Problem des verstümmelten MySQL-Inserts

Problembeschreibung: Beim Einfügen chinesischer Z...

Zusammenfassung der MySQL-Tabellen- und Spaltenkommentare

Genau wie bei Code können Sie den Tabellen und Sp...

Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht

Vorwort Jede Anwendung, die in JavaScript geschri...

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

Verwenden Sie HTML, um komplexe Tabellen zu erste...

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

Lassen Sie uns nun mehrere Situationen zur Steuer...

Vue-Element-Admin integriert eine eigene Schnittstelle, um den Login-Sprung zu realisieren

1. Schauen Sie sich zunächst die Anforderungskonf...

Horizontale und vertikale Zentrierung von DIV und Bildern, kompatibel mit mehreren Browsern

Der erste Typ: vollständige CSS-Steuerung, Layer ...

Detaillierte Erklärung gängiger Docker-Befehle

1. Hilfe-Befehl 1. Aktuelle Docker-Version anzeig...

TD bei der Webseitenproduktion kann auch über die versteckte Anzeige hinauslaufen

Wenn ich diesen Artikel so nenne, wird vielleicht ...

MySQL InnoDB-Quellcodeanalyse für Transaktionssperren

Inhaltsverzeichnis 1. Schloss und Riegel 2. Wiede...

Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert

Inhaltsverzeichnis 1. Übersicht 2. Speicherverwal...

So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

Der spezifische Code lautet wie folgt: <Stil&g...

Analyse des Ereignisschleifenmechanismus von js

Vorwort Wie wir alle wissen, ist JavaScript im Ke...