如何解决移动端H5或App输入框被键盘遮挡的问题？

本文共计241个文字，预计阅读时间需要1分钟。

移动端H5和App输入框被键盘挡住解决方案+在移动端开发中，页面中使用如iScroll或Swiper等插件滚动屏幕时，在安卓手机弹出的键盘会遮挡输入框，使得无法正常输入实现。

移动端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; } }); }