限制字符个数,中文输入法截断问题。
情况:
限制为7个字,英文没有问题,但是中文再输入最后几个字的时候,拼音过长被自动截断了。
解决办法:
使用compositionstart ,compositionend
compositionstart:
当用户使用拼音输入法开始输入汉字时,这个事件就会被触发
compositionend:
当用户结束使用拼音输入法开始输入汉字时,这个事件就会被触发
记录变量:cpLock //是否正在因为输入法中
let _this = this;
for(let i=1;i<=4;i++){
let obj = document.getElementById('inputCounter_key'+i);
if(obj){
obj.addEventListener('compositionstart', function(e):void{
_this.cpLock = true;
});
obj.addEventListener('compositionend', function(e):void{
_this.cpLock = false;
_this.inputCounterFun(e,'key'+i);
});
}
}
字符截取函数
/**
* 输入限制
* 1中文 = 1字符
* 其他 = 两个=1字符
* */
inputCounterFun(e,key:string):void{
let max:number=7;
if(key == 'key1'){
max=4;
}else if(key == 'key2'){
max=6;
}else if(key == 'key3'){
max=7;
}else if(key == 'key4'){
max=7;
}
if(!this.cpLock){
let length:number = 0;
let lengthInt:number = 0;
//不在中文输入中
if(e.target.value && e.target.value != null && e.target.value != ''){
e.target.value.split("").map(str=>{
if (escape(str).indexOf( "%u" )<0){
//英文
length+=0.5;
}else{
//中文
length+=1;
}
if(Math.ceil(length) <= max){
lengthInt+=1;
}
});
}
length =Math.ceil(length);
if(length >= max){
e.target.value = e.target.value.substr(0,lengthInt);
}
this.inputCounter[key]=length > max ? max : length;
this.addProgress();
}
}
每个项目情况不同,借鉴思路即可。
通过compositionstart ,compositionend事件判断是否再中文输入中,如果再输入中不做处理,等待输入完毕截取多余部分。