How to use SJ to monitor the number of characters entered in a text box in real time

This time I will bring you the method of inputting the number of characters in the SJ real-time monitoring text box, and what are the precautions for SJ real-time monitoring of the number of input characters in the text box. , the following is a practical case, let’s take a look.

RequiredRequired: 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. Such as:

<p>
  <textarea id="txt" maxlength="10"></textarea>
  <p><span id="txtNum">0</span>/10</p>
 </p>

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 the input method alternative).

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, and the monitored value length is obtained.

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
  txtNum.textContent = txt.value.length;
 })

Writing in vue:

template:

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

data:

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

methods:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of How to use SJ to monitor the number of characters entered in a text box in real time. For more information, please follow other related articles on the PHP Chinese website!