Ausführliche Erläuterung der Echtzeitüberwachung der Anzahl der in ein Textfeld eingegebenen Wörter

Dieser Artikel enthält hauptsächlich einen Beispielcode für die Echtzeitüberwachung der Anzahl der in ein Textfeld eingegebenen Wörter. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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

1. Überwachen Sie die aktuelle Anzahl der Wörter Geben Sie es in Echtzeit ein und verwenden Sie direkt die Ereignismethode onkeyup. Fügen Sie dem Eingabefeld das Attribut maxlength 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 es normal, aber bei der Eingabe von Chinesisch ändern sich die überwachten Zahlen mit der Pinyin-Länge.

2. Lösung:

Das Compositionstart-Ereignis wird vor der Eingabe eines Textstücks ausgelöst (ähnlich dem Keydown-Ereignis, aber dieses Ereignis findet nur vor der Eingabe mehrerer sichtbarer Zeichen statt, 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;
  }
 }

in Vue geschrieben:

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();
}

Verwandte Empfehlungen:

Eingabeaufforderungen zum Entfernen von Inhalten für chinesische HTML5-Textfelder

Deaktivieren Sie das Eingabeimplementierungsattribut für Eingabetextfelder

js verschiedene Verifizierungstextfeld-Eingabeformate (reguläre Ausdrücke)_Form-Spezialeffekte

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Echtzeitüberwachung der Anzahl der in ein Textfeld eingegebenen Wörter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!