大佬教程收集整理的这篇文章主要介绍了实时监控文本框输入字数的实例代码,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
需求:实时监控文本输入框的字数,并加以限制
@H_489_14@1、实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度。如:
<div> <textarea ID="txt" maxlength="10"></textarea> <p><span ID="txtNum">0</span>/10</p> </div>
var txt = document.getElementByID("txt"); var txtNum = document.getElementByID("txtNum"); txt.addEventListener("keyup",function(){ txtNum.textContent = txt.value.length; })
此时已可以完成基本的监控功能,存在的问题:当输入英文时正常,但输入中文时,监控的数字会随拼音长度而变化。
@H_489_14@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,
@H_936_2@methods:
write() { let self = this; if (self.chnIpt == falsE) { self.conterNum = self.textContent.length; } },importStart() { this.chnIpt = true; },importEnd() { this.chnIpt = false; this.write(); }
以上这篇实时监控文本框输入字数的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程小技巧。
以上是大佬教程为你收集整理的实时监控文本框输入字数的实例代码全部内容,希望文章能够帮你解决实时监控文本框输入字数的实例代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。