看React事件文档的时候,看到了几个没太见过的事件,compositionstart,compositionupdate,compositionend。搜索了一下,原来是为了解决中文输入法问题的,我之前也有类似的困惑,原来有专门的事件,今天就来看看这几个事件。

问题描述

一般我们在input,textarea上会绑定一个onChange事件,监听用户的输入内容,例如搜索框,我们会根据当前用户输入的内容去做一个搜索。不过如果遇到中文输入,就比较麻烦,例如“电脑”这两个字,如果用拼音输入法,那么会先输入"dian"这几个字母,如果用onChange去监听,会触发4次,每输入一个字母都会触发一次,会搜索出完全不想干的内容。

compositionstart,compositionupdate,compositionend就是专门为了那种组合汉字的事件,例如我们开始输入中文,就会触发compositionstart,输入过程中,会触发compositionupdate,输入完成会触发compositionend。

change事件和composition事件比较 gif change事件和composition事件比较

通过上面的demo,我们可以看到在输入中文时,compositionEnd确实比change事件好用,它可以检测到最后的中文,而忽略中间的拼的过程。那么是不是说我们以后就只要compositionEnd不用chang事件呢?其实不是的。因为compositionEnd只是在处理中文的时候的时候好用,但是对于数字,字母,compositionEnd是监听不到的,因此要将这两者组合起来才行。

这里要注意的是,在非chrome浏览器上,是先触发compositionEnd再触发change,但是在chrome上,是先触发change再触发compositionEnd。结合的主要思想是用一个变量标识此时是否出于composition中,当触发compositionEnd时,那个标示就变成false,到change事件后,就可以获取内容。在chrome上就是要再手动触发一下change事件。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字