js实时监控文本框输入文字示例代码

要求：实时监控和限制文本输入框的字数

1.实时监控当前输入的单词，直接使用onkeyup事件方法，通过添加maxlength属性来限制输入框的长度。例如：

div text area id=' txt ' max length=' 10 '/text area PS pan id=' txt num ' 0/span/10/p/div var txt=document . getelementbyid(' txt ')；var txt num=document . getelementbyid(' txt num ')；txt.addEventListener('keyup '，function(){ Txtnum . TextContent=Txt . value . length；})此时可以完成基本的监控功能，但存在问题：输入英文时正常，但输入中文时，被监控的数字会随着拼音长度变化。

2.解决方案：

Compositionstart事件是在输入一段文字之前触发的(类似于keydown事件，但是这个事件只是在输入几个可见字符之前，而这些可见字符的输入可能需要一系列的键盘操作、语音识别或者点击输入法的备选词)。

Compositionend是对应于一段文本输入的事件。

这两个属性有点类似于“switch”。例如，当开始中文拼音输入时，开关打开，监控的长度值不变。在完整输入一个或一串字符后，关闭开关，获得监控长度值。

var txt=document . getelementbyid(' txt ')；var txt num=document . getelementbyid(' txt num ')；var sw=false//定义闭合开关txt。addeventlistener ('keyup '，function(){ if(SW==false){ count txt()；} });txt . addeventlistener(' composition onstart '，function(){ SW=true；});txt . addeventlistener(' composition end '，function(){ SW=false；countxt()；});function count txt(){//count function if(SW==false){//仅当开关闭合时，才分配txt num . text content=txt . value . length；}}用vue写作：

模板：

text area name=' improvements-text ' id=' text area ' cols=' 30 ' row=' 10 ' maxlength=' 300 ' v-: keyup=' write()' v-: composition onstart=' importStart()' v-: composition end=' importEnd()' v-model=' text content '/text arep class=' counterNum ' { conterNum } }/300/pdata :

textContent: ' '，conterNum: 0，chnIpt: false，methods:

write() {让self=thisif(self . chnipt==false){ self . conternum=self . text content . length；}}，import start(){ this . chnipt=true；}，import end(){ this . chnipt=false；this . write()；}以上在实时监控文本框中输入文字的示例代码是边肖分享的全部内容。希望能给大家一个参考，支持我们。