实现移动端的即时搜索的最佳方案,一定是使用input propertychange事件了,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现多次触发input事件的情况,一开始可能由于搜索的关键字不得法,没有即时找到合适的方案,后来终于在网上找到了解决方案,现记录如下:
代码实现
/**
* @param flag: 用于标记是否是非直接的文字输入
*/
var flag = false;
$('#id').on({
'compositionstart': function() {
flag = true;
},
'compositionend': function() {
flag = false;
if(!flag) {
//do something...
doSomethingFunction();
}
},
'input propertychange': function() {
if(!flag) {
//do something...
doSomethingFunction();
}
}
});
- 实现原理:借助 compositionstart 和 compositionend 两个事件来作为一个开关,同时借助状态变量,只在文字输入结束之后再触发input事件
- 使用该方式处理之后,如果只是需要输入英文,那么需要点击enter确定才触发
根据规范,Composition 事件触发顺序如下:
- 输入开始时触发
compositionstart
- 选择字/词完成输入时触发
compositionend
- 输入过程中每次击键时触发
compositionupdate
,包括 start 事件以后立即触发,end 事件以前立即触发 - Composition 事件以后触发
input
事件
通过 Composition 事件,在 compositionend
里校验非直接输入,就能有效地避免不恰当的校验时机产生的用户体验问题。
原文链接:https://www.cnblogs.com/chaoyueqi/p/9166769.html