下面小编就为大家分享一篇实时监控文本框输入字数的实例代码, 具有很好的参考价值, 希望对大家有所帮助一起跟随小编过来看看吧
需求: 实时监控文本输入框的字数, 并加以限制
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();
- }
来源: http://www.phperz.com/article/18/0319/362920.html