现象
正常ios H5页面点击输入框,键盘弹起会自动将页面上移并不会遮挡页面内容。但使用Collapse组件,并默认关闭状态下。打开折叠面板点击输入框,如果输入框处于最底部,第一次打开ios键盘弹起,页面会保持不动。第二次打开就会正常,体验很不好。目前安卓还未发现。
分析原因
个人分析并没查到依据供参考:页面首次打开会自动计算滚动条高度,当展开Collapse后滚动条发生了变化,再次弹起键盘导致页面不会上移。当触发input的blur事件后,滚动条重新计算,所以二次将会正常弹起。
解决
既然input失焦后会重新计算,那就当折叠面板打开的时候手动触发下input的blur事件即可以解决. 所以直接页面创建不用的input标签
<input id="XXXX"/>
if(isIos()) {
document.getElementById('XXXX').focus();
document.getElementById('XXXX').blur();
}
#XXXX {
position: absolute;
opacity: 0;
width: 0;
height: 0;
top: -100px;
}
经测试此方法可以解决初次页面不上移问题
仅供参考