①：上面的效果图随意摆放的input输入框唤起键盘的对齐问题，下面上代码：
*{margin:0;padding:0;}
html,body{width:100%}
.box{width:100%}
.box ul li{width:100%;height:80px;line-height:80px;margin-bottom:5px;background:lightblue;text-align:center;}
.inputBox{width:100%;height:60px;line-height:60px;background:lightblue;text-align:center;}
.input1{width:100%;height:80px;line-height:80px;font-size:20px;border:none;background:gainsboro;}
.input2{width:100%;height:60px;line-height:60px;font-size:20px;border:none;background:gainsboro;}
012356789012345
$(document).ready(function() {//如果此处增加一个alert弹窗，IOS上面就可以自动对齐，如果没有则不会自动对齐加个延迟的定时器尽然也可以达到同样的效果，alert和延迟定时器有什么关系吗?
var u=navigator.userAgent;
var isAndroid=u.indexOf('Android') > -1||u.indexOf('Adr') > -1;//android终端
var isiOS= !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//ios终端
var scrollTop;
$(".input1").focus(function() {
scrollTop=document.body.scrollTop; //获取焦点时记录一下input的当前位置，以便失去焦点的时候重新回到原来的位置；或者$(document).scrollTop()也可以setTimeout(function() { //如果不用定时器和alert之类的，不会执行，
if(isiOS){//这里要判断IOS和安卓，因为他们执行的是不同的代码
document.body.scrollTop= ($(".input1").offset().top-98); //这个在IOS上面是好的，$(".class").offset().top获取页面到顶部的距离，后面减的是input元素框的高度，}
if(isAndroid){
document.body.scrollTop= ($(".input1").offset().top-180); //这个在安卓上是好的，如果input输入框在页面底部就不用管没事，如果input输入框在页面中就需要上面的代码，才可以，$(".class").offset().top获取页面到顶部的距离，后面减的是input元素框的高度，但是安卓的关闭键盘时输入框没有失去焦点，导致无法回到原来的位置，只能点击其他地方才会突然回到原来的位置。下面的失去焦点回到原来位置的代码不知道还有没有必要？
}
},40);
}).blur(function() {
setTimeout(function() {
document.body.scrollTop=scrollTop;
},40);
})
});
如果觉得《html 输入框键盘遮挡 解决输入框被键盘挡住的问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
