DOM事件学习之兼容中文输入法

写在前面

很多同学或许有遇到过这样的场景：
需要实时得到用户在input输入框中输入的内容，很多同学可能第一反应就是监测keyup，keydown这些事件，然后把获取到的内容输出出来；

可是上述解决方法却会有个问题，就是使用中文输入法时，会出现像 zhong'wen 这样的内容，这是为什么呢？

原来，keyup和keydown获取到的内容只是输入时的内容，而中文输入法需要最好打个空格才能得到打字的结果，这就造成了困扰，获取到的内容不是想要的啊！有木有！！！

不要担心，使用以下这几个事件可以让你对付中文输入法无忧：compositionstart/compositionupdate/compositionend

事件解释

• compositionstart
  是指中文输入法开始输入触发，每次输入开始仅执行一次，执行的开始是end事件结束了才会触发；

• compositonupdate
  是指中文输入法在输入时触发，也就是可能得到 zhogn'wen 这种内容，这里返回的内容是实时的；仅在Start事件触发后触发，输入时实时触发；

• compositionend
  是指中文输入法输入完成是触发；这是得到的结果就是最终输入完成的结果；此事件仅执行一次；

使用

document.addEventListener("compositionstart", function(e) {
    console.log("start:" + e.data);
});

document.addEventListener("compositionstart", function(e) {
    console.log("start:" + e.data);
});

document.addEventListener("compositionend", function(e) {
    console.log("end:" + e.data);
});

结果

• 参考链接http://frontenddev.org/articl...