安卓虚拟键盘挡住input框解决办法

问题描述：ios弹出虚拟键盘的时候会自动将页面顶上去，不会遮住input输入框，而安卓则会挡住。

解决办法：

1.使用如下代码来区分安卓，存入localStorage中

if ((navigator.userAgent.match(

                /(Android)/i

            ))) {

            /*你的手机版*/

            localStorage.setItem("noPC", true);

        }

 

2.判断是安卓端，监听input输入框聚焦事件，input聚焦必定弹出虚拟框，此时给页面加padding-bottom使页面可滚动（因为页面（容器）可滚动时scrollIntoView()才有用！），再使用scrollIntoView()使input框滚动到可视区域，代码如下

$('input').on("focus", function() {

        if (localStorage.getItem("noPC")) {

            $("#chagePWD").css({

                "padding-bottom": "400px",

            })

            setTimeout(() => {

                const activeElement = document.activeElement;

                activeElement.scrollIntoView(); //焦点元素滚到可视区域

            }, 200);

        }

    });

 

3.监听input输入框失去焦点事件，虚拟键盘收起，页面恢复原样，代码如下

$('input').on("blur", function() {

        if (localStorage.getItem("noPC")) {

            $("#chagePWD").css("padding-bottom", "0px")

        }

    });

 

在各安卓手机和安卓平板上亲测兼容良好

 

 

scrollIntoView()的解释：

scrollIntoView是一个与页面（容器）滚动相关的API（官方解释），该API只有boolean类型的参数能得到良好的支持（firefox 36+都支持），所以在这里只讨论参数Boolean类型的情况。

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；

参数为false时，使element的底部与视图（容器）底部对齐。

TIPS：页面（容器）可滚动时才有用！