A-A+

ios-橡皮筋-javascript IOS上微信在 输入框 弹出键盘后空白

2020年03月12日 JavaScript 暂无评论 阅读 55 次

javascript IOS上微信在 输入框 弹出键盘后,页面不恢复,下方有留白,有弹窗弹出时页面内容感应区域错位,这个问题是在ios12.0版本中出现的。

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

解决办法:

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

付代码如下:

 <input
            type="text"
            class="inputValue"
            v-model="teamCodeValue"
            @blur="inputBlur"
            placeholder="说明"
          >
    //对应的methods中添加js
    inputBlur () {
      window.scrollTo(0, 0)
    },

mescroll

 this.mescroll = new MeScroll(this.$refs.mescroll, {
        down: {
          auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
          callback: this.downCallback // 下拉刷新的回调
        },
        up: {
          // onScroll: (mescroll, y, isUp) => { console.log(y, isUp, 111) },
          isLock: true,
          auto: false, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
          callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
          page: {
            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
            size: 10 // 每页数据的数量
          },
          noMoreSize: 10 // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        }
      })
    // 输入框失焦
    inputBlur (option) {
      let listBody = this.$refs.imbodyContainer
      this.$nextTick(() => {
        setTimeout(() => {
          listBody.scrollIntoView()
        }, 100)
      })
    },

其他参考

<script>
    var u = navigator.userAgent, app = navigator.appVersion
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    $(document).ready(function(){
        $("input").blur(function(){
            if (isIOS) {
                blurAdjust()
                // alert("1231321233")
            }
        });
    });
    // 解决苹果不回弹页面
    function blurAdjust(e){
        setTimeout(()=>{
            // alert("1231321233")
            if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
                return
            }
            let result = 'pc';
            if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                    result = 'ios'
            }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
                    result = 'android'
            }

            if( result = 'ios' ){
                document.activeElement.scrollIntoViewIfNeeded(true);
            }
        },100)
    }
</script>

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录