1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| 当用户使用中文 IME 在搜索框里输入文字时，输入法里的备选词还没上屏，AJAX 请求就已经开始了，导致产生了一堆无意义的搜索请求。
根因：使用 IME 在文本框输入时，通常需要一连串的键盘操作、语音识别或者点击输入法的备选词，IME 关闭前文本框内输入的内容属于非直接输入，而非直接输入会触发 input 事件。
简版代码
let isComposing = false;
inputElm.addEventListener('compositionstart', e => isComposing = true);
inputElm.addEventListener('compositionend', e => {
isComposing = false;
// 派发 input 事件
const inputEvt = new Event('input');
e.target.dispatchEvent(inputEvt);
});
inputElm.addEventListener('input', e => {
// 如当前 IME 未关闭（文本未上屏），则拦截
if (isComposing) return;
console.log(e.target.value)
// ajax search...
});
高级代码
inputElm.addEventListener('compositionend', e => {
// 派发 input 事件
const inputEvt = new Event('input');
e.target.dispatchEvent(inputEvt);
});
inputElm.addEventListener('input', e => {
// 如当前 IME 未关闭（文本未上屏），则拦截
if (e.isComposing) return;
console.log(e.target.value)
// ajax search...
});
兼容 IE 和 Safari
inputElm.addEventListener('compositionstart', function(e) {
e.target.isComposing = true; // 把判断合成状态的变量保存到当前元素上（DOM）
});
inputElm.addEventListener('compositionend', function(e) {
e.target.isComposing = false;
var inputEvt;
if (typeof Event === 'function') {
inputEvt = new Event('input')
} else {
inputEvt = document.createEvent('Event');
inputEvt.initEvent('input', true, true);
}
e.target.dispatchEvent(inputEvt);
});
inputElm.addEventListener('input', function(e) {
// 如当前 IME 未关闭（文本未上屏），则拦截
if (e.target.isComposing) return;
console.log(e.target.value)
// ajax search...
});
|