So überwachen Sie die Anzahl der in ein Textfeld eingegebenen Wörter in js (ausführliches Tutorial)

Nachfolgend teile ich Ihnen einen Beispielcode für die Echtzeitüberwachung der Anzahl der in ein Textfeld eingegebenen Wörter mit. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Anforderungen: Überwachen Sie die Anzahl der Wörter im Texteingabefeld in Echtzeit und begrenzen Sie sie

1. Überwachen Sie die aktuelle Anzahl der eingegebenen Wörter in Echtzeit, verwenden Sie direkt die Ereignismethode onkeyup und fügen Sie das Attribut maxlength zum Eingabefeld hinzu, um die Länge zu begrenzen. Beispiel:

<p>
 <textarea id="txt" maxlength="10"></textarea>
 <p><span id="txtNum">0</span>/10</p>
 </p>

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
 txtNum.textContent = txt.value.length;
 })

An diesem Punkt kann die grundlegende Überwachungsfunktion abgeschlossen werden. Das bestehende Problem ist: Bei der Eingabe von Englisch ist dies normal, bei der Eingabe von Chinesisch jedoch die überwachten Zahlen ändern sich mit der Pinyin-Länge.

2. Lösung:

Das Compositionstart-Ereignis wird vor der Eingabe eines Textes ausgelöst (ähnlich dem Keydown-Ereignis, aber dieses Das Ereignis tritt erst einige Zeit vor der Eingabe sichtbarer Zeichen auf, und die Eingabe dieser sichtbaren Zeichen erfordert möglicherweise eine Reihe von Tastaturoperationen, Spracherkennung oder Alternativen zur Klick-Eingabemethode.

compositionend ist ein Ereignis, das einer Texteingabe entspricht.

Diese beiden Attribute ähneln in gewisser Weise einem „Schalter“. Wenn Sie beispielsweise mit der Eingabe von chinesischem Pinyin beginnen, wird der Schalter aktiviert und der überwachte Längenwert wird nach einem vollständigen Text nicht mehr geändert Wenn eine Textzeichenfolge eingegeben wird, wird der Schalter ausgeschaltet. Ermitteln Sie die Länge des überwachten Werts.

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false; //定义关闭的开关
 txt.addEventListener("keyup", function(){
 if(sw == false){
  countTxt();
 }
 });
 txt.addEventListener("compositionstart", function(){
 sw = true;
 });
 txt.addEventListener("compositionend", function(){
 sw = false;
 countTxt();
 });
 function countTxt(){ //计数函数
 if(sw == false){ //只有开关关闭时，才赋值
  txtNum.textContent = txt.value.length;
 }
 }

geschrieben in vue:

Vorlage:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>

Daten:

textContent: '',
conterNum: 0,
chnIpt: false,

Methoden:

write() {
 let self = this;
 if (self.chnIpt == false) {
 self.conterNum = self.textContent.length;
 }
},
importStart() {
 this.chnIpt = true;
},
importEnd() {
 this.chnIpt = false;
 this.write();
}

Das Obige ist das, was ich für alle zusammengestellt habe Nützlich für Sie in der Zukunft. Jeder ist hilfreich.

Verwandte Artikel:

Verwenden Sie Axios, um die Abrufmethode zu kapseln und aufzurufen

Was sind die Unterschiede zwischen Map und ForEach in JS?

So implementieren Sie die Fortschrittsbalkenkomponente für das Laden von Seiten in Vue

So verwenden Sie Javascript, um jeden Tag innerhalb des Datumsbereichs unterschiedliche Preise zu erhalten

So implementieren Sie die Bildladekomponente in Vue

Warum wird Node.js zu einer Webanwendungsentwicklung?

So implementieren Sie die längste gemeinsame Teilsequenz in Javascript

Das obige ist der detaillierte Inhalt vonSo überwachen Sie die Anzahl der in ein Textfeld eingegebenen Wörter in js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!