JS 表单弹出键盘兼容性处理

在我们日常前端开发或者工作中，经常会遇到HTML页面提交表单，弹出手机键盘出现各种各样的兼容性问题。android终端还是ios终端弹出异常等。

下面总结了基础的处理弹出键盘的兼容性问题，以供参考。

//判断是android终端还是ios终端 
$("document").ready(function () {
    var m = navigator.userAgent;
    var isAndroid = m.indexOf('Android') > -1 || m.indexOf('Adr') > -1; //android终端
    var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端       
    var timer;
    if (isIos) {
        // ios 弹出与收起软键盘执行事件
        document.body.addEventListener('focusin', () => { //软键盘弹起事件
            $(".footer").css('position', 'relative');
            $('.mask').css({'height':'200%','top':'-50%'});
             window.addEventListener("touchmove", () => {
                $("input").blur();
            });
        })
        document.body.addEventListener('focusout', () => { //软键盘关闭事件
            $(".footer").css('position', 'fixed');
            $('.mask').css('height','100%');
            // 解決ios端用微信打开页面，收起软键盘后，底部出现空白问题
            setTimeout(() => {
                const scrollHeight =
                    document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        })
    }
    if (isAndroid) {
        // android 弹出与收起软键盘执行事件
        const innerHeight = window.innerHeight;
        window.addEventListener('resize', () => {
            const newInnerHeight = window.innerHeight;
            if (innerHeight > newInnerHeight) {
                // 键盘弹出事件处理
                $(".footer").hide();
            } else {
                // 键盘收起事件处理
                $(".footer").show();
            }
        });
    }
});