重构编辑器站点后,有用户反映在edge浏览器上使用微软输入法无法输入中文。
首先我们看下中文输入法再输入过程中是啥样?如下图:
我们可以看到输入中文时,在编辑器里会有一段临时存在的拼音,如果我们停留在这里,不敲回车键,这时候编辑器会去获取一下当前的光标所在的位置,很正常的需求,也很正常的操作,但是微软输入法下就无法正确获取,导致光标消失,用户无法输入中文。
很困惑,也很无奈,但是还得解决啊。解决思路就是如果用户正在输入中文,我们就不做任何操作,等待用户输入了确定的中文文字后,我们再操作。但是怎么知道用户是正在输入中文,而不是英文数字符号呢?
其实是可以知道的,当用户开始输入中文时会触发compositionstart,中文输入结束时会触发compositionend , 这两者之间就是输入中文时的状态,需要skip掉。
示例代码如下:
editor.isCompositionOn = false; // 标识用户是否正在输入
$editElem.on('compositionstart', () => {
editor.isCompositionOn = true;
Logger('compositionstart');
});
$editElem.on('compositionend', () => {
editor.isCompositionOn = false;
// your operation here
...
Logger('compositionend');
})
前端坑无限,踩踩更健康