js实时监控文本框输入字数的实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js实时监控文本框输入字数的实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1994字，纯文字阅读大概需要3分钟。
内容图文
需求：实时监控文本输入框的字数，并加以限制
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;
})
此时已可以完成基本的监控功能，存在的问题：当输入英文时正常，但输入中文时，监控的数字会随拼音长度而变化。
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();
}
以上这篇实时监控文本框输入字数的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的js实时监控文本框输入字数的实例代码全部内容，希望文章能够帮你解决js实时监控文本框输入字数的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。