实时监控输入框文本长度

在学习过程中遇到的一个问题，关于解决拼音回改变文本域value.length的问题。
文本域的长度当然是使用 value值来获取当前长度，并且利用onmouseup事件监听。

 
 
0/10
 

var txt = document.getElementById("txt");
 var num = document.getElementById("num");
 txt.addEventListener("keyup", function(){
 num.innerHTML = txt.value.length;
 })

到目前其实已经实现了对文本长度的实时监控，但是在测试的时候发现，打出拼音时，拼音会被默认的算成文本长度。
于是经过一番搜索，找到了一个事件和具体的解决方法

解决方法：

compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。

compositionend 就是对应的就是一段文字输入的事件。

这两个属性有点类似于“开关”，如：开始进行中文输入的拼音时开关打开，不在改变监测得到的长度数值，完整输入一个或是一串文字后，开关关闭，得到监测的数值长度。

var txt = document.getElementById("txt");
 var num = document.getElementById("num");
 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){ //只有开关关闭时，才赋值
 num.innerHTML = txt.value.length;
 }
 }