收藏
回答

新版本IOS微信键盘收起后页面被遮挡

新版本IOS微信(6.7.4)键盘收起后页面被遮挡,select,input,textarea失去焦点时键盘位置页面元素被遮挡,滚动页面才会好,暂时的方案是代替用户做滚动操作处理,有么有更好的解决方案

最后一次编辑于  2018-12-13
回答关注问题邀请回答
收藏

3 个回答

  • 王翊夫if
    王翊夫if
    2018-12-13

    XCode10打包引发的系统 Webview bug ,目前在等待苹果官方修复。

    页面暂时修复方法可以监听键盘的收起事件,恢复一下页面。

    下面是 stack overflow 的一个解决方案,可以参考一下。


    /**
     
     * iOS 12 bug for keyboard dismissing, view not restored ಠ_ಠ
     
     */
     
    if (device.ios && device.osVersion.split('.')[0] >= 12) {
     
        jQuery(document).delegate('input, textarea', 'blur', function(){
     
            setTimeout(function(){
     
            // did not work for me straight away without a small timeout ಠ_ಠ
     
            jQuery('html').animate({height: '100.1vh'}, 100, function(){
     
                // did not work for me with just one instruction with 100vh  ಠ_ಠ
     
                // the easing smooth doesn't work all the time properly ಠ_ಠ
     
            jQuery(this).animate({height: '100vh'}, 1);
     
            });
     
            },100);
     
        });
     
    }


    2018-12-13
    赞同 2
    回复 4
    • 良月十七
      良月十七
      2018-12-25

      有没有不用jQuery的其他方法额

      2018-12-25
      回复
    • 王翊夫if
      王翊夫if
      2018-12-25回复良月十七

      document.scrollTop = document.scrollTop?

      2018-12-25
      回复
    • 薛定谔的猫
      薛定谔的猫
      2018-12-25

      不用jQuery能不能解决问题?

      2018-12-25
      回复
    • 张娟娟
      张娟娟
      07-03

      现在这个问题官方解决了吗?为什么safari 浏览器没问题呢

      07-03
      回复
  • 发呆的祥
    发呆的祥
    05-22

    VUE 指令方法

    // Vue指令,解决IOS软键盘关闭后,被撑起的页面无法回退到原来正常的位置
    import Vue from 'vue';
    Vue.directive('ios-bug-fixed', {
     
        inserted(el) {
     
            el.__reset_input_handler = () => {
                window.scrollBy(0, -1);
                setTimeout(() => {
                    window.scrollBy(0, 1);
                }, 10);
     
            }
     
            el.addEventListener('focusout', el.__reset_input_handler);
            el.addEventListener('blur', el.__reset_input_handler);
     
        },
     
        unbind(el) {
     
            el.removeEventListener('focusout', el.__reset_input_handler);
            el.removeEventListener('blur', el.__reset_input_handler);
     
            delete el.__reset_input_handler;
        }
     
    });

    使用

    <cube-input class="input-item" v-ios-bug-fixed v-model="model.phone" placeholder="手机号" :maxlength="20"></cube-input>
    05-22
    赞同
    回复
  • lmx🍭
    lmx🍭
    05-13

    还是有这个问题...., 现在的解决办法是

    失去焦点的时候执行下这个

    window.scroll(0, 0);

    05-13
    赞同
    回复