h5底部输入框被键盘遮挡_移动端虚拟键盘引发的问题分析

我在工作的过程中无论是与原生结合的Hybird的H5页面或者微信公众号页面都会遇到当触发键盘输入行为时，页面窗口往上离开屏幕（与iOS的适配）或者页面高度变小（在微信中打开页面等），现在我们来分析一下各种情况以及解决的方法。

iOS中页面往上顶的情况

// 兼容ios弹出键盘改变页面问题
if (_browser.versions.ios) { //判断是否为ios环境
    $('body').on("blur", 'input', function() { //用原生js的addEventListener也是可以的
    setTimeout(function() {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
         }, 100);
    })
};
           

Tips：

• _browser.versions.ios

  用于判断是否为ios环境，详情可见本人另一篇文章《判断环境为iOS或Android》，当然你也可以用你自己的判断方法。

• blur

  当在ios环境中，点击input或者textare都会触发虚拟键盘弹出以及改变页面高度，这时候当我们收起键盘时想要将页面高度还原就相当于当失去焦点的时候页面滚动回底部。（在最近一点版本的safair中我却发现页面会主动的还原，而微信公众号打开的页面却不会，这可能是新版的safair已经修复了这个问题，而微信的浏览器内核依旧是旧版本的safair内核）。

• setTimeout

  这个定时器是为了在页面恢复高度的时候显得更加平滑，这个看项目情况自主设置。
• 获取当前页面的滚动条纵坐标位置 在标准w3c下，

  document.body.scrollTop

  恒为0，但是某些内核中又不含有

  document.documentElement.scrollTop

  ，所以我们需要这样获取滚动条高度:

  var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

• window.scrollTo(xpos,ypos)

• Math.max(scrollHeight - 1, 0)

  防止取到null或者underfind

Android键盘遮挡输入框问题

//安卓键盘遮挡问题
if (_browser.versions.android) {
    window.addEventListener("resize", function() {
    if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA"){
        window.setTimeout(function() {
           document.activeElement.scrollIntoViewIfNeeded();
        }, 0);
    }
  })
};
           

Tips:

• resize

  为监听页面发生变化时触发的事件，这是应为Android弹出虚拟键盘的效果与ios是不一样的，Android相当于将窗口高度缩小，所以才不会像ios那样出现下面空白。

• document.activeElement

  此API为获取当前活动元素，包含聚焦。

• document.activeElement.scrollIntoViewIfNeeded();

  这个API的作用就是把绑定的元素移动到可见区域，当然要是你在ios中也有遮挡问题，也可以这么设置。