问题
input
和 editor
在同一个页面,在富文本编辑器中编辑文本后点击 input
框页面会回到编辑富文本的高度
点击富文本
富文本编辑后点击input
此时页面会被上滑到富文本编辑器的高度(编辑器聚焦时页面会被上推,系统行为以保证编辑区可见)
解决方案
给 editor
组件绑定 blur
事件,手动触发编辑器的blur
事件
<editor
@blur="blur"
>
</editor>
blur() {
this.editorCtx.blur();
}
原因
-
测试
通过给input
和editor
绑定focus
和blur
事件测试发现,如果只是在页面中点击,事件会正常触发,但是如果在一个元素处于聚焦状态时点击页面外,则会在点击页面外时触发一次blur
事件,下一次点击页面内时会依次触发元素的focus
和blur
事件 -
结论
从上面测试结果得知,在富文本编辑器中编辑完毕后,点击软键盘的收回按钮就相当于聚焦到页面外,再次点击上方的input
时会依次触发editor
的focus
和blur
事件,相当于富文本静默的聚焦-失焦
一次,就触发了富文本的默认上推事件
tips
先点击 input
在点击 editor
最后点击页面其他地方时,事件顺序为 input---focus
,input---blur
,editor---focus
,editor---blur
先点击 editor
在点击 input
最后点击页面其他地方时,事件顺序为 editor---focus
,input-focus
,editor---blur
,input---blur