关于input输入中文时,不断触发input事件的问题
监听一个文本框的input事件的时候,当输入中文但未实际填充到文本框还在候选时,也会一直触发input事件,如图:(搬运原文图片)
compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)
compositionend 当文本段落的组织已经完成或取消时,会触发该事件。
触发compositionstart时,文本框会填入 “虚拟文本”(待确认文本),同时触发input事件;在触发compositionend时,就是填入实际内容后(已确认文本)。
解决思路:
声明一个标记flag,在compositionstart、compositionend两个事件过程之间的时候flag值为false,在input事件中通过flag的值来判断当前输入的状态。
1 | var flag = true; |
tips:
为什么使用延时器?
因为选词结束的时候input会比compositionend先一步触发,此时flag还未调整为true,所以不能触发到console,故用setTimeout将其优先级滞后。
评论
TwikooValine