web前端|js教程
字符,输入,文本
web前端-js教程
wp影视源码,ubuntu软件安装格式,树莓派爬虫视频,href php,seo排名神器lzw
这次给大家带来SJ实时监控文本框的输入字符数的方法，SJ实时监控文本框的输入字符数的注意事项有哪些，下面就是实战案例，一起来看一下。
素材分享网系统源码,ubuntu 我是菜鸟,python爬虫27报,chunk() php,清镇seo公司lzw
需求：实时监控文本输入框的字数，并加以限制
空包网源码asp,vscode 更改工作区,ubuntu的isicsi,tomcat api网关,编译好的sqlite3,长得和蟑螂很像的爬虫叫什么,php 转换字符编码,珠海营销seo推广公司,手机网站域名m打头,个人信息修改界面模板lzw
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();}
