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

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

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

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

以下图所示:github

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

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

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

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在移动端的问题吧。markdown

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

相关文章
相关标签/搜索