input输入中文未完成时触发change事件

最近做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输入中文未完成时触发change事件)