解决因emoji列表展示时手动点击textarea后在bindfocus处隐藏emoji列表造成的键盘遮挡
发布于 3 年前 作者 tao14 2470 次浏览 来自 分享

1.第一次点击输入框时键盘弹起

2.点击emoji图标展开emoji选项列表

3.在emoji选项列表展开时点击textarea区域,在bindfoucs函数中将emoji列表隐藏造成了键盘遮挡

问题分析:在点击textarea时会优先弹起软键盘后触发focus的方法,所以在软键盘弹起时已经进行了adjust-position: true(键盘弹起时,自动上推页面),之后再将showEmoji设置为false会引起软键盘遮盖页面

解决办法:

在bindfocus的方法中

页面大体布局

思路:

页面整体布局分采用flex column,在focus时判断当前的emoji列表是否在显示,如果显示的时候点击了textarea区域就将键盘的高度设置为整体页面的padding-bottom来抵消emoji列表消失时造成的键盘遮挡

代码片段:https://developers.weixin.qq.com/s/AuNwbCms7FwW

回到顶部