小程序editor和input在同一个页面时,input会触发editor的聚焦

问题

inputeditor 在同一个页面,在富文本编辑器中编辑文本后点击 input 框页面会回到编辑富文本的高度

点击富文本

在这里插入图片描述

富文本编辑后点击input

此时页面会被上滑到富文本编辑器的高度(编辑器聚焦时页面会被上推,系统行为以保证编辑区可见)
在这里插入图片描述

解决方案

editor 组件绑定 blur 事件,手动触发编辑器的blur事件

<editor
   @blur="blur"
 >
 </editor>
blur() {
  this.editorCtx.blur();
}

原因

  • 测试
    通过给 inputeditor 绑定 focusblur 事件测试发现,如果只是在页面中点击,事件会正常触发,但是如果在一个元素处于聚焦状态时点击页面外,则会在点击页面外时触发一次 blur 事件,下一次点击页面内时会依次触发元素的focusblur 事件

  • 结论
    从上面测试结果得知,在富文本编辑器中编辑完毕后,点击软键盘的收回按钮就相当于聚焦到页面外,再次点击上方的 input 时会依次触发 editorfocusblur 事件,相当于富文本静默的聚焦-失焦一次,就触发了富文本的默认上推事件

tips

先点击 input 在点击 editor 最后点击页面其他地方时,事件顺序为 input---focusinput---blureditor---focuseditor---blur

先点击 editor 在点击 input 最后点击页面其他地方时,事件顺序为 editor---focusinput-focuseditor---blurinput---blur

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值