Hybird移动端虚拟键盘引发的问题怎么解决

这篇文章主要讲解了“Hybird移动端虚拟键盘引发的问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Hybird移动端虚拟键盘引发的问题怎么解决”吧！

在工作的过程中无论是与原生结合的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中也有遮挡问题，也可以这么设置。

感谢各位的阅读，以上就是“Hybird移动端虚拟键盘引发的问题怎么解决”的内容了，经过本文的学习后，相信大家对Hybird移动端虚拟键盘引发的问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！