input输入框在iphone手机因预输入导致bug的处理方法

iphone手机在输入框输入内容，比如汉字拼音“中国”时，系统会预输入成“zhong guo”填入输入框中，这样会导致预想不到的问题（比如联想匹配问题）。

一般我们实现联想功能，代码常见实现如下：

$('#input_id').on("input", function(event) {
  // 回调事件
});

这段代码在PC端和Android手机基本上都能正常实现功能，但是在iphone手机，你输入"中国"，却由于预输入的问题，导致了联想的是"zhong guo"的内容，从而达不到预期效果。

背景交代完毕，下面是解决方案。

通过查询，我发现input有两个事件：compositionstart和compositionend。在输入中文（包括语音识别时）会先后触发compositionstart、compositionend事件，类似于keydown和keyup的组合。

来看一下关于两个事件的介绍：
compositionstart：事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。

compositionend：当文本段落的组织已经完成或取消时，会触发该事件。可以理解为输入拼音结束，按下空格将汉字输入完成以后执行的事件。

有了这两个事件，再结合input事件，我们就可以完美的解决上述遇到的问题了，具体思路如下：
1、声明一个全局变量flag，标识正在输入的状态，设置为false，表示当前没有在输入;
2、添加compositionstart事件，在该事件执行时将flag设置为true，表示当前正在输入；
3、添加compositionend事件，在该事件执行时将flag设置为false，表示当前已停止输入；
4、添加input事件，在该事件执行时判断flag是否为true，如果为true，则不执行联想，如果为false，则执行联想。

最后，注意一下事件回调顺序为：
compositionstart --> input --> compositionend