如何监听input输入框中的中文输入？

如何监听input输入框中的中文输入？
来源

如何监听input输入框中的中文输入？

一般常用 input 事件监听 input 输入框的内容输入，但是 input 事件不能识别输入法的输入。即，当在 input 输入框中使用中文输入法输入汉字时，input 事件会在监听到最终输入的汉字之前，监听到输入的所有的中文拼音（英文字母）。所以如果想要在使用输入法输入时只监听输入法输入的最终结果的时候，就不能只是简单的使用 input 事件了。

这里的 input 事件指的是 oninput 事件

使用的事件

使用 compositionstart 和 compositionend 两个事件（事件名就是全小写）

compositionstart 事件是在输入法开始输入的时候触发
compositionend 事件是在输入法结束输入的时候触发

compositionstart、compositionend 与 input 事件的执行顺序是：compositionstart > input > compositionend

如何判断当前是否是输入法输入呢？

在事件之外，设置一个 flag，判断当前是否是输入法输入。缺省为非输入法输入

因为事件的执行顺序是 compositionstart > input > compositionend，所以可以在 compositionstart 中设置 flag 为 true，表示现在开始输入法输入
input 事件中，判断 flag 是否为 true。如果 flag 为 true，表示当前正在使用输入法输入，不做处理；否则获取输入的内容
在 compositionend 中设置 flag 为 false，表示输入法输入结束

如何拿到 input 中的所有被输入的内容呢？

与 flag 的设计相似。在事件之外设置一个可变的 string 类型变量，这里假定为 content。

在 compositionend 中 content += 输入的值
在 input 中，判断 flag。如果是 false，表示是非输入法输入，content += 输入的值
content 的值就是 input 输入框中所有被输入的内容了

测试源码

复制<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input id="frame" type="text" />

    <script>
      let content = "";
      let compositionstart = false;
      // 输入法输入开始时执行；如果不是输入法输入，不触发
      frame.addEventListener("compositionstart", e => {
        compositionstart = true;
        console.log("compositionstart", e);
      });
      frame.addEventListener("compositionend", e => {
        compositionstart = false;
        content += e.data;
        console.log("compositionend", e);
      });
      frame.addEventListener("input", e => {
        if (compositionstart) {
          return;
        }
        content += e.data;
        console.log("input input", e);
      });
      frame.addEventListener("blur", e => {
        console.log("输入的最终内容:", content);
      });
    </script>
  </body>
</html>