How to monitor the number of words entered in a text box in js (detailed tutorial)

Below I will share with you 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.

Requirement: Monitor the number of words in the text input box in real time and limit it

##1. Monitor the current input word count in real time, directly use the onkeyup event method, and 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 only occurs after several before the input of 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, and the monitored length value is no longer 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;
 }
 }

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

The above is what I compiled for everyone. I hope it will be useful to you in the future. Everyone is helpful.

Related articles:

Use axios to encapsulate the fetch method and call

What are the differences between Map and ForEach in JS?

How to implement the page loading progress bar component in vue

How to use javascript to obtain different prices every day within the date range

How to implement the image loading component in vue

Why will Node.js become a web application development?

How to implement the longest common subsequence in javascript

The above is the detailed content of How to monitor the number of words entered in a text box in js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!