实时监控文本框输入字数

需求：实时监控文本输入框的字数，并加以限制
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
欢迎关注支持，谢谢！