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

„Implizite Konvertierung“ von MySQL 5.6 führt zu Indexfehlern und ungenauen Daten

Hintergrund Beim Ausführen einer SQL-Abfrage habe...

Grafisches Tutorial zur Installation und Aktivierung von VMware Workstation 14 Pro

In diesem Artikel erfahren Sie alles über die Ins...

Reiner CSS-Code zum Erzielen eines Drag-Effekts

Inhaltsverzeichnis 1. Beispiel für Drag-Effekt 2....

Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu

Vor einiger Zeit hat der Blogger das Ubuntu-Syste...

Die neueste Version der MySQL5.7.19-Dekomprimierungsversion Installationshandbuch

MySQL-Version: MySQL Community Edition (GPL) ----...

Detailliertes Installations- und Konfigurationstutorial zum MySQL-Flashback-Tool binlog2sql

Überblick binlog2sql ist ein in Python entwickelt...

Detaillierte Erläuterung zum Erstellen eines Nginx-Websiteservers basierend auf CentOS7 (einschließlich der Konfiguration eines virtuellen Webhosts)

1. Nginx-Dienstgrundlage Nginx (Engine x) wurde s...

Erfahren Sie in einem Artikel mehr über JavaScript-Closure-Funktionen

Inhaltsverzeichnis Variablenbereich Das Konzept d...

jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird

Schauen wir uns zunächst meinen Fehlercode an. ht...

Verwenden Sie die CSS Paint API, um auflösungsunabhängige, variable Hintergrundeffekte dynamisch zu erstellen

Quelle: https://medium.com/better-programming, Au...

Tutorial-Diagramm zur Installation von Zabbix2.4 unter Centos6.5

Die feste IP-Adresse des Centos-DVD1-Versionssyst...

Ein MySQL-Migrationsplan und eine praktische Auflistung der Fallstricke

Inhaltsverzeichnis Hintergrund Lösung 1: Alte Dat...

Eine kurze Einführung in die Unterschiede zwischen HTML und XHTML sowie HTML4- und HTML5-Tags

Unterschied zwischen HTML und XHTML 1. XHTML-Elem...

So stellen Sie Rancher mit Docker bereit (keine Fallstricke)

Vor der Inbetriebnahme unbedingt lesen: Hinweis: ...

So installieren und konfigurieren Sie einen FTP-Server in CentOS8.0

Nach der Veröffentlichung von CentOS8.0-1905 habe...