在input输入框输入中文时,需要即时查询出匹配输入内容的结果,一般我们会使用input事件监听用户输入事件,但是在输入汉语拼音时,也会触发input事件,前端就会不断发送请求,用户体验非常差劲。
针对这种情况,笔者给大家介绍一个简单易懂的好方法。
代码如下:
var cpLock = false;
$('#search-input').on('compositionstart', function () {
cpLock = true;
});
$('#search-input').on('compositionend', function () {
cpLock = false;
});
$('#search-input').on('input', function () {
if (!cpLock) {
// TODO
}
});
````
#### 原理:
当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.
当浏览器是直接的文字输入时, compositionend会以同步模式触发.
当元素监听到compositionstart事件,给input中事件加锁,禁止input中事件执行,当元素监听到compositionend事件,给input中事件解锁,正常执行。
将以上内容形成插件:
compositionEvent.js
````
var compositionEvent = {
init: function(){
positionEventName = true;
this.bindEvents();
},
bindEvents: function(){
var self = this;
$(document).on('compositionstart', function() {
positionEventName = false;
});
$(document).on('compositionend', function() {
positionEventName = true;
});
}
};
compositionEvent.init();
````