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

< Textbereich id = "text_txt1" > </ Textbereich >
< Spanne id = "num_txt1" > 600 Zeichen verbleiben </ span >

js-Teil:

JavaScript CodeInhalt in die Zwischenablage kopieren

$( Funktion () {
$( '#text_txt1' ).on( 'keyup' , Funktion (){
var txtval = $( '#text_txt1' ).val().length;
Konsole.log(txtval);
var str = parseInt(600-txtval);
konsole.log(str);
wenn (str > 0 ){
$( '#num_txt1' ).html( 'Der Rest kann eingegeben werden' +str+ 'Zeichen' );
} anders {
$( '#num_txt1' ).html( '0 Zeichen verbleiben' );
$( '#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
}
//console.log($('#num_txt').html(str));
});
})

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

JavaScript CodeInhalt in die Zwischenablage kopieren

Funktion changeLength(obj,num){
obj.on( 'keyup' , Funktion (){
var txtval = obj.val().Länge;
//Konsole.log(txtval);
var str = parseInt(600-txtval);
//console.log(str);
wenn (str > 0 ){
num.html( 'verbleibende Eingabe' +str+ 'Wörter' );
} anders {
num.html( '0 Zeichen verbleiben' );
obj.val(obj.val().substring(0, 600));
}
//console.log($('#num_txt').html(str));
});
}
$( function (){ // Ich habe hier vier, also rufe ich 4 Mal auf
Länge ändern($( '#text_txt1' ),$( '#num_txt1' ));
Länge ändern($( '#text_txt2' ),$( '#num_txt2' ));
Länge ändern($( '#text_txt3' ),$( '#num_txt3' ));
Länge ändern($( '#text_txt4' ),$( '#num_txt4' ));
});

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

< div Klasse = "Familie_v2" >
< p Klasse = "nickname_v2" > Einführung: </ p >
< Textbereich id = "Inhalt" Name = "Zeichen" Stil = "Höhe: 60px; Überlauf-y: ausgeblendet;"
onkeyup = "Länge ändern(diese,60)" Klasse = "nicknameBox_v2 brief_box_v2" >
</ Textbereich >
< div Klasse = "limit_num_v2" >
< h3 > 60 </ h3 >
</div>
</div>

javascript - Argumente:

JavaScript CodeInhalt in die Zwischenablage kopieren

//Überprüfen Sie die Länge des Textbereichs
Funktion Längenänderung(obj,lg){
var Länge = $(obj).val();
$(obj).next().find( "h3" ).text(lg-len.length);
wenn (Länge.Länge>=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 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

Analyse des Prinzips des dynamischen Proxys des Mybatis-Mappers

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

Analyse des Prinzips des dynamischen Proxys des Mybatis-Mappers

Detaillierte grafische Erklärung zur Installation und vollständigen Löschung von MySQL durch Dekomprimierung

Eine kurze Erläuterung des CSS-Überlaufmechanismus

MySQL 8.0 DDL-Atomaritätsfunktion und Implementierungsprinzip

JavaScript zur Implementierung der Webversion des Gobang-Spiels

Detaillierte Erläuterung der Verbindungslimitkonfiguration von Nginx für IP-Adressen in einem Netzwerksegment

Detailliertes Tutorial zur Installation von Protobuf 3 unter Ubuntu

So erstellen Sie einen SVN-Server unter Linux

Vue+Element - benutzerdefinierte Abfragekomponente

Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat

Artikel empfehlen

JavaScript zum Erreichen einer festen Seitenleiste

Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy

Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click

Detaillierte Erläuterung des Quellcodes der vue.$set()-Methode von Vue

Erklärung der Rückgabe einer MySQL-Tabelle führt zur Ungültigkeit des Index

Detailliertes Beispiel für die Verwendung von Typescript zum Einkapseln von Axios in Vue3

Detailliertes Beispiel zum Einfügen benutzerdefinierter HTML-Datensätze im Quill-Editor

React + Threejs + Swiper vollständiger Code zum Erzielen eines Panoramaeffekts

Detaillierte Erklärung zum Festlegen des Änderungswerts innerhalb einer bestimmten Zeit in Zabbix

Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows

VUE+Express+MongoDB-Frontend- und Backend-Trennung zur Realisierung einer Notizwand

Einige Erkenntnisse und Gedanken zu iframe

Über die Verwendung von benutzerdefinierten CSS3-Variablen in Projekten aus einer Projektrekonstruktion sprechen

XHTML-Tags, die durch den Ort der Verwendung leicht verwechselt werden können

Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets