input输入汉字时,拼音会触发@input

一、问题描述

在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;
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容