【Vue】14.解决微信浏览器input关闭键盘后导致页面底部空缺的问题

桃扇骨 2022-03-22 07:09 469阅读 0赞

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

我是flex的布局，目前Android和Ios上都有这个问题

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

解决办法有三种：

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

// 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
          inputLoseFocus() {
            setTimeout(() => {
              window.scrollTo(0, 0);
            }, 100);
          },

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

// 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
          inputLoseFocus() {
            setTimeout(() => {
              const scrollHeight = document.documentElement.scrollHeight
                || document.body.scrollHeight;
              window.scrollTo({
                top: scrollHeight,
                behavior: 'smooth',
              });
            }, 100);
          },

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

// 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
          inputLoseFocus() {
            console.log(`window.pageYOffset: ${window.pageYOffset}`);
            window.scrollTo({
              top: window.pageYOffset,
              behavior: 'smooth',
            });
          },

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