HTML input 输入法联想取值问题与 compositionend 解决

场景

使用 input 的 onInput 事件时，在输入拼音时，如 qiye，这时输入法会根据 qiye 这个拼音联想出其对应的中文，如企业，这时没有按回车，输入法仍旧是联想状态，但是 onInput，获取的值已经是 qiye 了，如果在 onInput 中触发接口调用，传入的值就是 qiye 这个拼音

解决方法

使用 input 的 compositionend 方法 ::: demo [vanilla]

<!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>

    <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>
  </body>
</html>

{
  "show": true
}

:::

用法

下面三个事件是 DOM3 Events 中所新增的合成事件。通过这几个事件，可以明确的知道键盘在输入框中的输入状态，是否正在候选中。

事件	触发时机
`compositionstart`	在 `IME` 的文本合成系统打开时触发，表示输入即将开始
`compositionupdate`	在新字符插入输入字段时触发
`compositionend`	在 `IME` 的文本合成系统关闭时触发，表示恢复正常键盘输入