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

Docker-Bereitstellung – Springboot-Projektbeispielanalyse

Dieser Artikel stellt hauptsächlich die Beispiela...

Implementierung der CSS-Rahmenlängensteuerungsfunktion

Wenn die Rahmenlänge früher kleiner als der Conta...

Die umfassendste Erklärung des Sperrmechanismus in MySQL

Inhaltsverzeichnis Vorwort Globale Sperre Vollstä...

Zusammenfassung des MySQL-Installationsdiagramms

Grafisches Tutorial zur Installation und Konfigur...

Detaillierte Erläuterung des MySql-Beispiels für automatische Kürzung

Detaillierte Erläuterung des MySql-Beispiels für ...

Benutzerdefinierter Vue-V-HAS-Befehl zum Implementieren der Schaltflächenberechtigungsbeurteilung

Anwendungsszenario Am Beispiel des Hintergrundver...

Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen

1. Installieren Sie Tomcat 1. Suchen Sie das Tomc...

Implementierung des Vue 3.x-Projekts basierend auf Vite2.x

Erstellen eines Vue 3.x-Projekts npm init @vitejs...

Der visuelle Designpfad der Website sollte den Benutzergewohnheiten entsprechen

Cooper sprach über den visuellen Pfad des Benutze...

WeChat Mini-Programm-Benutzerautorisierung zum Abrufen einer Mobiltelefonnummer (getPhoneNumber)

Vorwort Das Miniprogramm verfügt über eine sehr p...

Implementierung der CSS-Variableneinfügung im Vue3-Stil

Inhaltsverzeichnis Zusammenfassung Einfaches Beis...

Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?

Was sind :is und :where? :is() und :where() sind ...

So deaktivieren Sie die Klartextanzeige und die Schnelllöschfunktion von IE10

IE10 bietet eine Schaltfläche zum schnellen Lösche...

Detaillierte Installation und Verwendung der Virtuoso-Datenbank unter Linux

Ich habe kürzlich einige Dinge zu verknüpften Dat...

Mysql implementiert Master-Slave-Konfiguration und Multi-Master-Multi-Slave-Konfiguration

Was wir jetzt simulieren, ist ein Master-Slave-Sy...