DOM事件学习之 监测中文输入法

写在之前

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

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

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

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

事件解释

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

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

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

使用

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);

});

结果

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!