中文拼音输入法在input监听的问题(监听字节数)

监听文本输入框的input 和propertychange事件，在拼写汉字（输入法）但汉字并未实际填充到文本框中（选词）时会触发input 和propertychange 事件

现在有一个需求需要监听input的框的字节数，超出10个字符或者20个字节不能继续输入了

超出10个字符或者20个字节不能继续输入

正常的情况超过十个字符的话我们可以用input 的maxlength属性，但是用length来判断的话数字和字母也会算一个length，所以在这里我们不能用这个属性

最初我的思路是：
用input 和propertychange 事件监听字节数的改变实时修改输入的字数
用jquery的blur 当输入域失去焦点去截取10个字符或者20个字节的输入内容

但是交互感觉不太好，我可爱的同事sket发现了一个属性监听中文输入发的输入compositionstart, compositionend
当文本段落的组成完成或取消时, compositionend 事件将被激发 (具有特殊字符的激发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。所以我用compositionend替换了blur事件去做操作，体验好了很多
相关解决办法的文章
具体的文档请点击这里

demo的案例请点击这里

codepen 上运行
jsfiddle 上运行

上代码：
input.html

<div class="name-body">
  <input type="text" id="name">
  <strong class="numberMain"><span class="numberReal">0</span>/10</strong>
</div>

input.js

var name = $("#name")
$("#name").on('input propertychange',function(){
var codeLength = getLength($(this).val()),
    length = Math.floor(codeLength/2)
    $('.numberReal').html(length)
})

$("#name").on('compositionend',function(){
var codeLength= getLength($(this).val()),
    length= Math.floor(codeLength/2),
    newStr= '',
    newCodeLength= 0
   if(length>10){
   //获取截取字节长度之后的字符串
   var arr =$(this).val().split('')
   for(var value of arr){
    newCodeLength += getLength(value)
    newStr+=value
    if(newCodeLength >=20){
     $(this).val(newStr)
      $('.numberReal').html(Math.floor(getLength($(this).val())/2))
     break
    }
   }
   }
});
/**
*获取字符串的字节长度
*/
function getLength(str)   
{  
    var realLength = 0;  
    for (var i = 0; i < str.length; i++)   
    {  
        charCode = str.charCodeAt(i);  
        if (charCode >= 0 && charCode <= 128)   
        realLength += 1;  
        else   
        realLength += 2;  
    }  
    return realLength;  
}