JS下的Composition Event

发表于 2022-02-03 更新于 2024-11-21 本文字数： 832 阅读时长 ≈ 1 分钟

本文是作者对JS下的Composition Event的介绍，包括JS下的Composition Event的优势、实现细节、相关资料等，这些步骤可以帮助作者提高JS下的Composition Event的效率。

Chrome下习惯使用Vimium进行书签检索，针对输入，因为有些书签是中文，而有些是英文，因此还存在输入法切换情况，留意发现，Vimium是直接根据输入的字符实时检索，不论是否是中文输入法，都直接根据输入字符进行检索。因为开发场景并没遇到类似考虑，提前扫盲，这里就系统了解下。

JS下能否获取当前输入法名称信息/能否临时修改输入法？

答案都是否，JS下并不能获取输入法信息，更不能修改输入法，而部分网页做到的提示用户是否是在中英文输入法状态等，是通过输入事件及输入字符来判断的。

Chrome插件呢？如Vimium这些插件，本身除了JS能力外，还有Chrome App层面提供的一些能力，但可惜也是无法修改输入法。

js下有这样几个事件

但凡用户进行输入，input事件即会出发，即使在中文输入法情况下，input也是实时触发变化。

而composition只有在中文输入法或其它靠键盘多个按键组合输入字符时才会触发，同时根据周期，依次唤起compositionstart/compositionupdate/compositionend三个事件。

比如一开始提到的vimium插件是监听的input的事件，从而一直进行搜索。

注意，InputEvent下返回对象有个isComposing属性，由此即可判断当前是不是处于输入状态，比如中文输入法下，这个就很有用。

输入可以分直接输入/间接输入，比如英文单词，键盘输入即是最终输入，而比如中文，具体比如微信这个词，是需要输入weixin，输入法再转换，确定最终字符为微信，因此输入过程存在间接/组合。这个角度去思考也就理解为何JS下有composition事件了。