0%

JS下的Composition Event

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

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

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

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

JS中的输入事件input/composition

js下有这样几个事件

  • input
  • composition
    • compositionstart/compositionupdate/compositionend

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

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

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

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

个人理解

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