So überwachen Sie mit SJ die Anzahl der in ein Textfeld eingegebenen Zeichen in Echtzeit

Dieses Mal werde ich Ihnen zeigen, wie Sie die Anzahl der Zeichen in das Textfeld von SJ eingeben. Welche Vorsichtsmaßnahmen gibt es, damit SJ das überwacht? Anzahl der in das Textfeld eingegebenen Zeichen in Echtzeit, das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

1. Überwachen Sie die aktuelle Anzahl der Eingabewörter in Echtzeit, verwenden Sie direkt die Ereignismethode onkeyup und fügen Sie dem Eingabefeld das Attribut maxlength hinzu, um die Länge zu begrenzen. Zum 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 ändern sich die überwachten Zahlen jedoch 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 kann erforderlich sein eine Reihe von Tastaturoperationen und Spracherkennung oder klicken Sie auf die alternative Eingabemethode).

„compositionend“ ist ein Ereignis, das einer Texteingabe entspricht.

Diese beiden Attribute ähneln in gewisser Weise einem „Schalter“. Wenn beispielsweise die chinesische Pinyin-Eingabe gestartet wird, wird der Schalter aktiviert und der überwachte Längenwert wird nicht mehr geändert, nachdem ein vollständiger Text oder eine Textzeichenfolge eingegeben wurde , der Schalter wird ausgeschaltet und die Länge des überwachten Werts wird ermittelt.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo überwachen Sie mit SJ die Anzahl der in ein Textfeld eingegebenen Zeichen in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!