连续的中文输入的事件

中文输入事件

问题描述

当监听input事件时，输入英文时，每输入一个字母，就会把这个字母送到输入框内，触发一次input事件。但当输入中文时，每个汉字或者每个词语都需要多次敲击键盘才能完成。未完成前，输入的汉字还没填充的input输入框内，此时并不需要触发input事件。

问题解决

利用composition合成事件,composition 事件组合分成三个事件：compositionstart、compositionupdate、compositionend，分别对应中文输入法下，开始输入、更新输入、结束输入的事件。具体的细节如下。

• compositionstart事件

  在文本合成系统如 IME：input method editor（即输入法编辑器）的文本复合系统打开时触发，表示要开始输入

• compositionupdate事件

  在向输入字段中插入新字符时触发（使用输入法输入的过程中）

• compositionend事件

  在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态(选中文字，输入法消失的那一刻)

代码实现

// 提前定义好一个变量，代表是否合成事件
let isOnComposition = false;
// 定义input事件处理器
handleInput(event){
  // 是合成事件，则结束，不执行input逻辑
  if(isOnComposition) return;
  // 非合成事件，处理input事件逻辑
}

// 定义compositionstart事件处理器
handleCompositionstart(event){
  // 合成事件开始，令isOnComposition=true
  isOnComposition = true;
  // 为true时，不会触发input事件逻辑
}

// 定义compositionend事件处理器
handleCompositionend(event){
  // 合成事件结束，令isOnComposition=false，然后触发一次input事件
  isOnComposition = false;
  handleInput(event)
}