实时监控文本框输入字数

发布时间:2019-01-10 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了实时监控文本框输入字数脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!

需求:实时监控文本输入框的字数,并加以限制

这里写图片描述

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();
}

作者:rookie.he(kuke_kuke) 博客链接:http://blog.csdn.net/qq_33599109 欢迎关注支持,谢谢!

总结

以上是脚本之家为你收集整理的实时监控文本框输入字数全部内容,希望文章能够帮你解决实时监控文本框输入字数所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: