iphoneX input blur之后, 键盘收起但键盘所占地方卡住的问题

795 阅读1分钟

今天遇到bug, iphoneX在input blur之后, 键盘收起来了,但是键盘所占的地方有时不变,有时卡住一半的问题

我的解决方案

<input @focus="fixIphoneXFocus" @blur="fixIphoneXBlur" placeholder="手机号"/>
<input @focus="fixIphoneXFocus" @blur="fixIphoneXBlur" placeholder="密码"/>
fixIphoneXFocus() {
    let count = 0
    // 注释掉的代码我不知道需不需要(穷,买不起iphoneX, 😭),我提交的代码是未注释掉的,不过我觉得是没用的
    this.fixIphoneXTimer = setInterval(() => {
        <!--if (document.body.clientHeight < this.documentHeight) {-->
        <!--    document.body.style.minHeight = this.documentHeight + 'px'-->
        <!--} else {-->
        <!--    console.log(this.documentHeight)-->
        <!--    document.body.style.minHeight = this.documentHeight + (count / 10) + 'px'-->
        <!--}-->
        if (count >= 10) {
            // 重点一句
            window.scrollTo(0,0)
            clearInterval(this.fixIosInputTimer)
            <!--document.body.style.minHeight = ''-->
        }
        count++
    }, 10)
}

fixIphoneXBlur() {
     clearInterval(this.fixIosInputTimer)
}

参考链接:

iphonex微信页面下,safari不会,input输入框拉起键盘后,键盘消失,但是原本键盘的区域还存在 developers.weixin.qq.com/community/d…