vue中解决模糊搜索输入中文时--未输入完成时触发input事件

在给输入框绑定input或keydown事件时预期效果是有输入法时，输入中文后触发事件，不希望输一个字母就触发一次事件

可以用到compositionstart，compositionend。主流浏览器都兼容

我们可以看下官方定义：

根据规范，Composition 事件触发顺序如下：

输入开始时触发 compositionstart
选择字/词完成输入时触发 compositionend
输入过程中每次击键时触发 compositionupdate，包括 start 事件以后立即触发，end 事件以前立即触发
Composition 事件以后触发 input 事件

通过 Composition 事件，在 compositionend 里校验非直接输入，就能有效地避免不恰当的校验时机产生的用户体验问题。

我们可以设置开关flag,给表单绑定compositionstart和compositionend事件

开始输入时触发compositionstart时关闭，禁止触发

输入完成后触发compositionend时开启，触发input事件

vue中解决模糊搜索输入中文时--未输入完成时触发input事件相关推荐

解决input中输入中文过程中会触发input事件的问题
问题描述: 监听文本输入框的input事件,在拼写汉字时会触发input事件,如下图: 需求: 选词完成后触发input事件,只触发一次. 解决办法: 通过查阅资料得知在输入中文(包括语音识别时)会先 ...
input输入中文时，拼音在输入框内会触发input事件的问题
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需求:选词完成后触发input事件,只触发一次. 解决办法: 通过查 ...
【h5】ios自带输入法输入中文时多次触发input事件的处理
实现移动端的即时搜索的时候监听input事件掉接口查询,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现输入一个字母就触发一次事件,导致频繁调用接口的问题. 如果是输入纯英文没什么 ...
vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
解决Photoshop CS3 输入中文不能显示输入文字不能显示输入文字显示缓慢
1．解决Photoshop CS3 输入中文不能显示输入文字不能显示输入文字显示缓慢安装完PS3后,用"T"文字工具输入文字,无论是输入英文还是中文,总会显示缓慢,迟迟不能显 ...
解决 ArchLinux 下中文 Chinese 不能输入 couldnt input 的问题
解决 ArchLinux 下中文 Chinese 不能输入 couldnt input 的问题一.Question 一年多的 ArchLinux 用户再次回归.然鹅,见面礼就是终端不能输入中文. 在 ...
vue中实现模糊搜索
vue中实现模糊搜索, 代码如下: 首先在框架中写一个input输入框 <template><div>//v-model实现双向绑定<input type="t ...
即时搜索：对于ios自带输入法输入中文时多次触发input事件的处理
实现移动端的即时搜索的最佳方案,一定是使用input propertychange事件了,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现多次触发input事件的情况,一开始可能由 ...

vue中解决模糊搜索输入中文时--未输入完成时触发input事件

vue中解决模糊搜索输入中文时--未输入完成时触发input事件相关推荐

最新文章

热门文章