时间:2021-07-01 10:21:17 帮助过:18人阅读
需求:实时监控文本输入框的字数,并加以限制
1、实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度。如:
<p> <textarea id="txt" maxlength="10"></textarea> <p><span id="txtNum">0</span>/10</p> </p>
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:
<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>
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各种验证文本框输入格式(正则表达式)_表单特效
以上就是实时监控文本框输入字数详解的详细内容,更多请关注Gxl网其它相关文章!