移动端H5和App端输入框被键盘挡住解决方法 在移动端的开发中,页面中使用了如iScroll或者是Swiper等插件用于滚屏时,在安卓手机弹机的键盘往往会挡住输全入框,使得无法正常输入实现
在移动端的开发中,页面中使用了如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; } }); }