html5输入法完成事件,监听Input在中文输入法下输入事件

正常情况下，如果想要监听输入框的输入事件并做一些其他的事比如实时搜索啥的，可以通过

input.addEventListener(‘input‘, function(event) {//do something

})

在输入英文或者是数字的情况下，这种情况是可行的。但是如果是中文输入法，比如输入‘我是谁’，input事件响应的是‘woshishui’，即每输入一个字母，都会触发一次 input 事件。但是我们只需要在选择完对应的中文之后才响应input事件，这时候就需要借助 compositionstart 跟 compositionend

compositionstart: 事件触发于一段文字的输入之前(类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)

compositionend: 当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)

具体思路：

1. 对input输入框添加 compositionstart 事件，当触发的时候，赋值给一个变量用于判断是否处于 composing 状态

2. 对input输入框添加 input 事件，当触发的时候，判断是否处于 composing 状态，如果是，不做任何处理，直接return

3. 对input输入框添加 compositionend 事件，当触发的时候，说明输入完成，这时候改变 composing 状态，并触发 input 事件

代码说话：

1

2

3

4

5

6

7

8

9

10 let input = document.querySelector(‘#input‘)11 input.addEventListener(‘compositionstart‘, function(e) {12 e.target.composing = true

13 })14

15 input.addEventListener(‘compositionend‘, function(e) {16 e.target.composing = false

17 //输入完成后触发input事件

18 trigger(e.target, ‘input‘)19 })20

21 input.addEventListener(‘input‘, function(e) {22 //避免输入拼音的时候触发该事件

23 if(e.target.composing) {24 return

25 }26 console.log(e.target.value)27 })28

29 functiontrigger(el, type) {30 let e = document.createEvent(‘HTMLEvents‘)31 e.initEvent(type, true, false)32 el.dispatchEvent(e)33 }34

35

36

原文：https://www.cnblogs.com/l-c-blog/p/11420790.html