監(jiān)聽文本輸入框的input 和propertychange事件霸妹，在拼寫漢字（輸入法）但漢字并未實(shí)際填充到文本框中（選詞）時會觸發(fā)input 和propertychange 事件
現(xiàn)在有一個需求需要監(jiān)聽input的框的字節(jié)數(shù)策幼，超出10個字符或者20個字節(jié)不能繼續(xù)輸入了
超出10個字符或者20個字節(jié)不能繼續(xù)輸入
正常的情況超過十個字符的話我們可以用input 的maxlength屬性速缆，但是用length來判斷的話數(shù)字和字母也會算一個length锈津，所以在這里我們不能用這個屬性
最初我的思路是：
用input 和propertychange 事件監(jiān)聽字節(jié)數(shù)的改變實(shí)時修改輸入的字?jǐn)?shù)
用jquery的blur 當(dāng)輸入域失去焦點(diǎn)去截取10個字符或者20個字節(jié)的輸入內(nèi)容
但是交互感覺不太好，我可愛的同事sket發(fā)現(xiàn)了一個屬性監(jiān)聽中文輸入發(fā)的輸入compositionstart, compositionend
當(dāng)文本段落的組成完成或取消時, compositionend 事件將被激發(fā) (具有特殊字符的激發(fā), 需要一系列鍵和其他輸入, 如語音識別或移動中的字詞建議)。所以我用compositionend替換了blur事件去做操作伤锚，體驗(yàn)好了很多
相關(guān)解決辦法的文章
具體的文檔請點(diǎn)擊這里
demo的案例請點(diǎn)擊這里
codepen 上運(yùn)行
jsfiddle 上運(yùn)行
上代碼：
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){
//獲取截取字節(jié)長度之后的字符串
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
}
}
}
});
/**
*獲取字符串的字節(jié)長度
*/
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;
}
