Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-04-13 11:57:46
Original
1513 people have browsed it

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>
Copy after login
rrree

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;
 })
Copy after login

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;
  }
 }
Copy after login

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>
Copy after login

methods:

textContent: '',
conterNum: 0,
chnIpt: false,
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template