最近做pc端时发现,在input输入中文时,拼音阶段就触发了change事件,造成了很多异常请求,如何修复此类问题呢?先了解一下以下事件:
输入中文时会触发的三个事件
compositionstart
当用户使用拼音输入法开始输入汉字时,这个事件就会被触发。
compositionupdate
input 事件在输入过程中、内容变化后就触发
compositionend
输入完成时会触发
change事件
键盘任意按键都会触发,无论中文还是英文,中文的输入拼音的过程中也会触发
需要解决的问题场景
输入中文时:输入完成时触发接口请求;输入英文、数字时:即时触发接口请求;
解决:
设置中间变量isOnComposition为false,当触发compositionstart时置为true,当触发compositionend时置为false,并触发接口请求;在change事件中监听,当isOnComposition为true时,不触发接口请求,为false时触发接口请求。
const handleComposition = (e) => {
if (e.type === 'compositionend') {
isOnComposition = false;
handleChange();
} else {
isOnComposition = true;
}
}
const handleChange = (e) => {
if(!isOnComposition) {
// 在此处触发接口请求
}
}
// 标签处 -- 以下为react 写法
<Input placeholder="请输入" onChange={handleChange} onCompositionEnd = {handleComposition}
donCompositionStart = {handleComposition} />