Comment surveiller le nombre de mots saisis dans une zone de texte en js (tutoriel détaillé)

Ci-dessous, je partagerai avec vous 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.

Exigences : 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 d'entrée en temps réel, utilisez directement la méthode d'événement onkeyup et 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 nombres surveillés changeront. La longueur du pinyin varie.

2. Solution :

L'événement compositionstart est déclenché avant la saisie d'un morceau de texte (similaire à l'événement keydown, mais ceci l'événement ne se produit que plusieurs fois avant la saisie de 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 aux « commutateurs ». 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 une chaîne. du texte est saisi, le commutateur est éteint. 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();
}

Ce qui précède est ce que j'ai compilé Pour tout le monde, j’espère que cela sera utile à tout le monde à l’avenir.

Articles connexes :

Utilisez axios pour encapsuler la méthode fetch et appeler

Quelles sont les différences entre Map et ForEach en JS ?

Comment implémenter le composant de barre de progression de chargement de page dans vue

Comment utiliser javascript pour obtenir des prix différents chaque jour dans la plage de dates

Comment implémenter le composant de chargement d'image dans vue

Pourquoi Node.js deviendra-t-il un développement d'application web ?

Comment implémenter la sous-séquence commune la plus longue en javascript

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!