Detailed explanation of real-time monitoring of text box input word count

This article mainly shares an example code for real-time monitoring of the number of words entered in a text box. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Requirements: Real-time monitoring of the number of words in the text input box and restrictions

1. Real-time monitoring of the current number of words entered, directly using the onkeyup event method , add the maxlength attribute to the input box to limit the length. For example:

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

At this point, the basic monitoring function can be completed. The existing problem is: when inputting English, it is normal, but when inputting Chinese, the monitored numbers will change with the pinyin length.

2. Solution:

The compositionstart event is triggered before the input of a piece of text (similar to the keydown event, but this event is only before the input of several visible characters, and the input of these visible characters May require a series of keyboard operations, speech recognition or click input method alternatives).

compositionend is an event corresponding to a piece of text input.

These two attributes are somewhat similar to a "switch". For example, when the Chinese pinyin input is started, the switch is turned on. If the length value obtained by monitoring is not changed, after a complete text or a string of text is input, the switch is turned off. Get the monitored value length.

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

Writing in vue:

template:

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

data:

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

methods:

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

Related recommendations:

html5 Chinese text box input removal content prompt

Prohibit input text box input implementation attribute

js various Verify text box input format (regular expression)_form effects

The above is the detailed content of Detailed explanation of real-time monitoring of text box input word count. For more information, please follow other related articles on the PHP Chinese website!