Comment utiliser SJ pour surveiller le nombre de caractères saisis dans une zone de texte en temps réel

Cette fois, je vais vous expliquer comment saisir le nombre de caractères dans la zone de texte de SJ en temps réel. Quelles sont les précautions pour que SJ surveille le. nombre de caractères saisis dans la zone de texte en temps réel, ce qui suit est un cas pratique, jetons un oeil.

ObligatoireObligatoire : Surveillez le nombre de mots dans la zone de saisie de texte en temps réel et limitez-le

1. Surveillez le nombre actuel de mots saisis en temps réel, utilisez directement la méthode événementielle onkeyup et ajoutez l'attribut maxlength à la zone de saisie pour limiter la longueur. Tels que :

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

À ce stade, la fonction de surveillance de base peut être complétée. Le problème existant est le suivant : lors de la saisie de l'anglais, c'est normal, mais lors de la saisie du chinois, les nombres surveillés changeront avec la longueur du pinyin.

2. Solution :

L'événement compositionstart est déclenché avant la saisie d'un morceau de texte (similaire à l'événement keydown, mais cet événement est seulement avant la saisie de plusieurs caractères visibles, et la saisie de ces caractères visibles peut nécessiter une série d'opérations au clavier, la reconnaissance vocale ou cliquez sur l'alternative de la méthode de saisie).

compositionend est un événement correspondant à un morceau de texte saisi.

Ces deux attributs sont quelque peu similaires à un « commutateur ». Par exemple, lorsque la saisie du pinyin chinois est démarrée, le commutateur est activé et la valeur de longueur surveillée n'est plus modifiée après la saisie d'un texte complet ou d'une chaîne de texte. , l'interrupteur est éteint et la longueur de la valeur surveillée est obtenue.

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

écrit en vue :

modèle :

<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>

données :

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

méthodes :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!