一、问题描述
在input输入的内容发生变更时,会实时触发上报埋点,发现输入汉字时,会触发多条上报。
如输入【管】,会在以下5个时间节点触发上报
g
gu
gua
guan
管
二、解决思路
输入中文(包括语音识别时)会先后触发compositionstart、compositionend事件,类似于keydown和keyup的组合。
compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。
compositionend 当文本段落的组织已经完成或取消时,会触发该事件。
声明一个标记flag,在compositionstart、compositionend两个事件过程之间的时候flag值为false,在input事件中通过flag的值来判断当前输入的状态。
三、具体实现
1、data中定义一个
flag:true
2、input中增加
// compositionstart事件只有在输入中文时才会触发,触发事件在input事件之前
// compositionend表示结束中文输入时触发的事件,不管最后输入的是不是中文都会触发
@compositionstart="flag = false"
@compositionend="flag = true"
3、在触发change时判断flag是否为true
if (!this.flag) {
return;
}