Explication détaillée du suivi en temps réel du nombre de mots saisis dans une zone de texte

Cet article partage principalement un exemple de code pour surveiller en temps réel le nombre de mots saisis dans une zone de texte. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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

Surveillez le nombre actuel de mots. saisi en temps réel et utilisez directement la méthode d'événement onkeyup, ajoutez l'attribut maxlength à la zone de saisie pour limiter la longueur. Par exemple :

<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 chiffres 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, une reconnaissance vocale ou des méthodes alternatives de saisie par clic).

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

Ces deux attributs sont quelque peu similaires à un "commutateur". Par exemple, lorsque vous commencez à saisir du pinyin chinois, le commutateur est activé et la valeur de longueur surveillée n'est plus modifiée après un texte complet ou un. chaîne de texte est saisie, le commutateur est désactivé. Obtenez la longueur de la valeur surveillée.

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

Recommandations associées :

invites de contenu de suppression de saisie de zone de texte chinoise HTML5

Interdire l'attribut d'implémentation de saisie de zone de texte de saisie

js divers formats d'entrée de zone de texte de vérification (expressions régulières)_form effets spéciaux

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!