实时监控文本框输入字数

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
需求:实时监控文本输入框的字数,并加以限制1、实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度。如:<div><textarea id="txt" maxlength="10"></textarea><p><span id="txtNum">0</span>/10</p></div>var txt...

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

这里写图片描述


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
欢迎关注支持,谢谢!

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部