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

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

---

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

模拟光标跟随

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

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

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

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

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