微信H5输入法弹起导致页面上移

2018-12-26  本文已影响0人  正正果实

最近写一个提交很多表单的页面,输入法弹起后,会遮住input框,于是为了能够看见input框,页面会上移,保证input在视野范围内,但是收起输入法之后,H5页面并没有下移恢复原来的样子,我测试了一下UC和safari,其他浏览器都是好的,其他浏览器会在输入法收起的时候,把页面往下滚动还原到原来的样子,但是iPhone微信不会还原,页面滚本不动,但是安卓版微信就是好的,而且奇怪的是,不是所有的iPhone微信都有这样的问题,我看到的iPhone8和Plus有这样的问题,可能跟手机有关吧。网上搜了一下,各种各样的解决方案,监听resize事件、修改position什么的。在这里我说下我最后的解决方案,要解决这个问题,就需要在输入法收起的时候,让页面往下滚动或者让元素向下滚动,后来我发现写个alert页面也可以还原,但是console.log却不行,我最后采用了元素滚动的解决方案。

<input ref="input" @blur="blur('input')">
blur(name) {
      this.$refs[name].scrollIntoView(false);
}

至于scrollIntoView大家可以自行查阅下,在input框失去焦点的时候,也就是输入法收起的时候,让input框滚动,最终解决了这个问题。

上一篇 下一篇

猜你喜欢

热点阅读