中文输入法中光标跟随能力触发的浏览器事件探究

---

:::tip 最近在着手腾讯文档的输入体验优化，在其中有一个不起眼的小需求引起了我的注意，并顺便研究了一些事件监听机制相结合的特点，特此记录一下填坑过程。 :::

模拟光标跟随

大部分的主流输入法都有这样一个特性，在输入中文时，可以通过左右方向键控制光标，移动至输入区中任意两个字符之间的位置，用户接下来的字符输入将在光标处直接插入。

由于腾讯文档的渲染的画布是完全自主实现的，为了在体验上与普通可编辑画布保持一致，我们需要自己来模拟这一光标的移动行为。

首先，我们需要确定的是输入法中的模拟光标进行更新的时机。经试验，用户在进行中文输入时，若使用了_方向键_移动光标，将会触发光标的移动行为。因此，首先要解决的是使用合适的事件监听来捕获这一行为，从而进行更新。既然是对输入框的行为进行模拟，自然而然的，我们首先想到的是输入框触发的监听器。

浏览器输入框对输入的监听机制

在浏览器对键盘的输入规范中，将键盘输入分为了直接输入与间接输入两种。直接输入将会触发输入框的 onInput 事件 (IE9 之前不支持该事件，只能用 onKeyUp 等键盘事件作为降级选择）。而对于间接输入，规范将事件监听分为了 onCompositionStart, onCompositionUpdate, onCompositionEnd 三个部分。

而间接输入的同时，中间态的写入也会导致输入框内容的变化，从而也会触发 onInput 事件。因此在间接输入中，事件的触发次序为：onCompositionStart, onCompositionUpdate, onInput, onCompositionEnd。

需要注意的是，若输入完成时，输入框的内容没有发生变化，则 onChange 事件与 onCompositionEnd 事件都将不会被触发。

中文输入法在键入选词的过程属于间接输入情况，此时中间文本不会直接落盘在输入框内。而通过回车等按键退出中文输入选词后，中文文字将会落盘到输入框&#