本文主要为大家分享一篇实时监控文本框输入字数的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。
需求：实时监控文本输入框的字数，并加以限制
1、实时监控当前输入字数，直接使用onkeyup事件方法，给输入框加maxlength属性限制长度。如：
0/10
登录后复制
var txt = document.getElementById("txt"); var txtNum = document.getElementById("txtNum"); txt.addEventListener("keyup", function(){ txtNum.textContent = txt.value.length; })
登录后复制
此时已可以完成基本的监控功能，存在的问题：当输入英文时正常，但输入中文时，监控的数字会随拼音长度而变化。
2、解决方法：
compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。
compositionend 就是对应的就是一段文字输入的事件。
这两个属性有点类似于“开关”，如：开始进行中文输入的拼音时开关打开，不在改变监测得到的长度数值，完整输入一个或是一串文字后，开关关闭，得到监测的数值长度。
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; } }
登录后复制
在vue中的写法：
template:
{{conterNum}}/300
登录后复制
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();}
登录后复制
相关推荐：
html5中文本框输入去除内容提示
禁止input文本框输入实现属性
js各种验证文本框输入格式(正则表达式)_表单特效
以上就是实时监控文本框输入字数详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2790664.html
