移动端H5和App输入框被键盘遮挡，如何完美解决？

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

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