在做搜索等功能的时候，我们经常需要实时获取用户输入的值，经常会获取到w'这样的拼音米。为了解决这个问题，在网上搜索了相关问题，发现了两个奇怪的事件：compositionstart和compositionend。compositionstart&compositionend在MDN上找到了他们的描述，compositionstart和compositionend。简单描述如下：compositionstart：在输入中文或语音等需要等待一系列输入的操作之前，会触发compositionstart事件。compositionend：当中文或语音输入完成或取消时，会触发compositionend事件。input和compositionend的触发顺序引起的问题注意：以下是chrome浏览器下的测试结果，其他浏览器请参考兼容性说明！我和大多数人一样，考虑用一个布尔值来判断自己是否在等待输入法的输入，然后在输入事件中根据它的布尔值来决定是否获取输入值。初始代码如下：varisInputZh=false;elem.addEventListener('compositionstart',function(e){isInputZh=true;},false);elem.addEventListener('compositionend',function(e){isInputZh=false;},false);elem.addEventListener('输入',function(e){if(isInputZh)return;varvalue=this.value;console.log(value);doSomething(value);},false);.好像没什么问题，但是运行之后，有点乱。一段中文输入完成后，控制台没有任何数据输出。嗯。.经过测试，发现compositionend事件是在input事件之后触发的。最终解决方案只能通过常规的方法解决：必须在compositionend和input事件中都加入对input值的处理。代码如下：varisInputZh=false;varsearch=document.querySelector('input');search.addEventListener('compositionstart',function(e){isInputZh=true;},false);search.addEventListener('compositionend',function(e){isInputZh=false;doSomething(search.value);},false);search.addEventListener('input',function(e){if(isInputZh)return;varvalue=this.value;doSomething(value);},false);关于兼容性，以上测试是在chrome浏览器下进行的。在Firefox和Edge浏览器下，发现input事件在compositionend事件之后触发，输入数字时，发现Firefox和Edge也会触发compositionend事件，以上只适用于chrome浏览器。写在最后，原文贴在github上。如果大家有什么好的解决方案，欢迎在评论中提出。
