vue页面在微信内置浏览器打开网页打开软件键盘出现底部空白解决方式
文章 2157 0 0 0
发布时间:2019年12月05日

概述

最近在做移动端vue项目的时候遇到了一个这样的一个问题,当我点击input框输调起手机软件盘输入内容以后,关闭软键盘,页面没有回到底部,导致底部出现了空白,手动往下滑动一下,页面才会恢复正常,当关闭软键盘的时候,页面不会自动回到底部。

目前Android和Ios上都有这个问题

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

解决办法有三种

(1)绑定一个失去焦点的blur事件,当其触发时,使scrollTo为0,这一种方式是使页面回到顶部

<div class="form-user username">
    <img class="form-user-icon" src="../../images/landing001/icon-user.png"/>
    <input type="text" @blur.prevent="inputLoseFocus"  placeholder="请输入调查对象姓名" v-model="surveyInfo.surveyedName"/>
    // 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
</div>
inputLoseFocus() {
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
},

(2)绑定一个失去焦点的blur事件,当其触发时,使scrollTo回到底部,这一种方式是使页面回到底部

<div class="form-user username">
    <img class="form-user-icon" src="../../images/landing001/icon-user.png"/>
    <input type="text" @blur.prevent="inputLoseFocus" placeholder="请输入调查对象姓名" v-model="surveyInfo.surveyedName"/>
</div>

// 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题

inputLoseFocus() {
    setTimeout(() => {
        const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        window.scrollTo({
            top: scrollHeight,
            behavior: 'smooth',
        });
    }, 100);
},

(3)绑定一个失去焦点的blur事件,计算当前input距离顶部的高度,使页面滚动到当前位置

<div class="form-user username">
    <img class="form-user-icon" src="../../images/landing001/icon-user.png"/>
    <input type="text" @blur.prevent="inputLoseFocus" placeholder="请输入调查对象姓名" v-model="surveyInfo.surveyedName"/>
</div>

// 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题

inputLoseFocus() {
    console.log(window.pageYOffset:&nbsp;${window.pageYOffset});
    window.scrollTo({
        top: window.pageYOffset,
        behavior: 'smooth',
    });
},

个人认为这三种方式没有好坏,只是适用的场景不同而已,当输入框比较靠上的时候,就使用第一种方式,当页面比较长,输入框比较靠下的时候,就使用第二种方式,当页面比较长,输入框在中间的时候,就比较适合第三种方式了。

补充一点,如果上述你的页面在微信浏览器使用此方法后还是出现空白那么恭喜你中了一个官方的bug,当你打开软键盘,点击home返回桌面你在进入你关闭的那个也发现键盘下去了,页面下面空白,不管怎么刷新也不行,那个是微信内置浏览器的问题,这个就跟我们无关了。

评论专区