vant Collapse内ios输入框首次页面不回弹上移问题

450 阅读1分钟

现象

正常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;
}
经测试此方法可以解决初次页面不上移问题

仅供参考