移动端H5和App端输入框被键盘挡住解决方法

移动端H5和App端输入框被键盘挡住解决方法

在移动端的开发中，页面中使用了如iScroll或者是Swiper等插件用于滚屏时，在安卓手机弹机的键盘往往会挡住输全入框，使得无法正常输入
实现方法是在输入框取得焦点时，监听resize事件，将当前页面往上移动一定的距离
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        if (isAndroid) {
            var show = false;
            var offsetTop = 0;
            var wh = $(window).height();
            //取得焦点时
            $(".input-focus").focus(function () {
                show = true;
                offsetTop = $(this).offset().top;
            });
            //弹出键盘时窗口会触发resize事件
            //这里面将输入框拉到屏幕的中间位置
            $(window).resize(function () {
                var height = $(this).height();
                if (wh - height > 50 && show) {
                    var h = '-' + parseInt(offsetTop - height / 2) + "px";
                    $(".page").css({"transform": 'translateY(' + h + ')'});
                }
                else {
                    $(".page").css({"transform": 'translateY(0px)'});
                    offsetTop = 0;
                }
            });
        }