input在微信iOS,点击输入法的完成后白屏问题

876 阅读1分钟

input,fixed在iOS坑点太多,不一一赘述,google有太多的demo可借鉴

昨天遇到个bug,输入框把底部弹出之后,收回时背景没有收回;

bug机型:iphone6,iphone6s (没有别的测试机,哭穷昂~)

如下图所示:

解决方案: 监听input的bulr事件,然后重置body的scrollTop;

<input @blur="inputBlur" type="text" v-model="phone" placeholder="输入手机号">
    inputBlur() {
      if(is_weixin() && getDevice().model == 'iPhone') {
        setTimeout(() => {
          document.body.scrollTop = 0;
        }, 200)
      }
    }

另外推荐个很好用的,微信调试工具:vconsole

html文件中引入可以直接使用。

<script src="https://s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>

小记:这算是我写的第一篇文章吧,文笔不好,markdown也不熟练,又不善于表达,遇到问题一直baidu or google,昨天遇到这个问题,查了很多资料都没有相关,后来静下来慢慢调试找出来,ios的键盘弹出不会触发window的resize事件,但是会有focus和bulr的事件,bulr之后body的滚动条没有重置,只好手动重置了,有时间在补充fixed,input在移动端的问题吧。

ps:有问题的话谢谢各位大佬指正。