微信浏览器input关闭键盘后导致页面底部空缺问题解决方案

昨天遇到一个问题,移动端页面中有一个input框

点击时弹出软键盘,关闭时页面底部空白出一部分,然后滑动一下又恢复原状了。

这个问题是在部分ios手机里出现的,目前安卓手机没有复现。

这个问题是在ios12.0版本中出现的。

猜测:在微信webview打开我们h5页面的时候,就固定了页面的高度,如果这个input在页面的底部,当呼出软键盘时,由于高度问题,整个webview会被键盘顶上去,而取消时没有恢复原状。

 

解决办法:

绑定一个blur事件,当其触发时,使scrollTo为0

付代码如下:

          
    //对应的methods中添加js
    inputBlur () {
      window.scrollTo(0, 0)
    },

方可解决  亲测有效

你可能感兴趣的:(前端--基础,项目中遇到的小问题,有用的代码总结,VUE相关)