场景
使用 input 的 onInput 事件时，在输入拼音时，如 qiye，这时输入法会根据 qiye 这个拼音联想出其对应的中文，如 企业，
这时没有按回车，输入法仍旧是联想状态，但是 onInput，获取的值已经是 qiye 了，如果在 onInput 中触发接口调用，传入的值就是 qiye 这个拼音
解决方法
使用 input 的 compositionend 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id=inputChange>
<input id="input">
<div style="margin-top: 50px">当前输入框中的值：<span id="inputVal"></span></div>
</div>
</body>
</html><script>
const inputContainer = document.getElementById('inputChange')
const input = inputContainer.querySelector('#input')
const inputVal = inputContainer.querySelector('#inputVal')
input.addEventListener('input', (e) => {
inputVal.innerHTML = event.target.value
})
input.addEventListener('compositionstart', (e) => {
console.log('compositionstart:', e)
})
input.addEventListener('compositionupdate', (e) => {
console.log('compositionupdate:', e)
})
input.addEventListener('compositionend', (e) => {
console.log(e.data)
console.log('compositionend 触发：最终获取到的值：', inputVal.innerHTML);
})
</script>用法
下面三个事件是 DOM3 Events 中所新增的合成事件。通过这几个事件，可以明确的知道键盘在输入框中的输入状态，是否正在候选中。
事件 | 触发时机 |
|---|---|
compositionstart | 在 IME 的文本合成系统打开时触发，表示输入即将开始 |
compositionupdate | 在新字符插入输入字段时触发 |
compositionend | 在 IME 的文本合成系统关闭时触发，表示恢复正常键盘输入 |
