var txt=. getelementbyid (txt);
var txtNum=. getelementbyid (“txtNum”);
三种。addEventListener(“弹起”,函数(){
txtNum。textContent=txt.value.length;
})
此时已可以完成基本的监控功能,存在的问题:当输入英文时正常,但输入中文时,监控的数字会随拼音长度而变化。
compositionstart事件触发于一段文字的输入之前(类似于keydown事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作,语音识别或者点击输入法的备选词)。
compositionend就是对应的就是一段文字输入的事件。
这两个属性有点类似于“开关”,如:开始进行中文输入的拼音时开关打开,不在改变监测得到的长度数值,完整输入一个或是一串文字后,开关关闭,得到监测的数值长度。
var txt=. getelementbyid (txt);
var txtNum=. getelementbyid (“txtNum”);
var sw=false;//定义关闭的开关
三种。addEventListener(“弹起”,函数(){
如果(sw==false) {
countTxt ();
}
});
三种。addEventListener (“compositionstart函数(){
sw=true;
});
三种。addEventListener (“compositionend函数(){
sw=false;
countTxt ();
});
函数countTxt(){//计数函数
如果(sw==false){//只有开关关闭时,才赋值
txtNum。textContent=txt.value.length;
}
}
<强>在vue中的写法:
& lt; textarea name=" suggestions-text " id=拔谋厩颉惫乜?" 30 "行=" 10 "最大长度=" 300 " v: keyup=靶?)”v: compositionstart=癷mportStart ()“v: compositionend=癷mportEnd ()“v模型=皌extContent”祝辞& lt;/textarea>
& lt; p class=" counterNum”在{{conterNum}}/300 & lt;/p>
textContent:”,
conterNum: 0,
chnIpt:假的,
write () {
让自我=;
如果(自我。chnIpt==false) {
自我。conterNum=self.textContent.length;
}
},
importStart () {
这一点。chnIpt=true;
},
importEnd () {
这一点。chnIpt=false;
this.write ();
}
之前
以上这篇实时监控文本框输入字数的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
