我们在做H5一屏的页面有输入框时经常会发生在安卓手机上点击输入框时会被唤起的软键盘盖住输入框，而苹果会自动把页面向上顶，现在我们就模拟一下苹果的机制，下面有完整代码，已经封装好，可以用于页面所有的input或tetarea文本域，先看一下演示地址yanshi.ys.zzzjw.top/index3.html 演示需要用安卓手机查看；
解决时遇到的问题：
在开始的思路是让输入框获得焦点时让盒子向上移动，这一步是正常的，然后失去焦点时在让盒子回位，当输入框有焦点时点击输入框外的部分是正常的，但安卓手机的软键盘上是有一个关闭软键盘的按钮，点击按钮键盘会关闭，但发现输入框的焦点并没有消失，此时页面也没有回位。
解决思路：
后来发现安卓手机的软键盘是占用屏幕高度的，所以使用resize事件，也就是视窗大小改变时触发的事件，判断如果窗口大小发生变化时，看变化后的窗口高度是比之前大还是小，小的话就是有虚拟键盘，大的话就是无键盘，然后判断设备是否是安卓设备，安卓设备才可触发，其余代码大都是在换算要走的位置。
以下为完整代码包含html css js:
<!DOCTYPE html>
使用方法：在所有会唤起软键盘的标签如input tetarea都加上class类名为anzhuoinp，把要走的盒子设置position定位，加上class类名为tiwendalaos便可，看以下图片：
解决时遇到的问题：
在开始的思路是让输入框获得焦点时让盒子向上移动，这一步是正常的，然后失去焦点时在让盒子回位，当输入框有焦点时点击输入框外的部分是正常的，但安卓手机的软键盘上是有一个关闭软键盘的按钮，点击按钮键盘会关闭，但发现输入框的焦点并没有消失，此时页面也没有回位。
解决思路：
后来发现安卓手机的软键盘是占用屏幕高度的，所以使用resize事件，也就是视窗大小改变时触发的事件，判断如果窗口大小发生变化时，看变化后的窗口高度是比之前大还是小，小的话就是有虚拟键盘，大的话就是无键盘，然后判断设备是否是安卓设备，安卓设备才可触发，其余代码大都是在换算要走的位置。
以下为完整代码包含html css js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<script src="http://www.duanlonglong.com/link/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
};
</script>
</head>
<style type="text/css">
body {
height: auto !important;
}
.box {
display: block;
position: fixed;
width: 16rem;
height: 100%;
top: 0;
left: 0;
}
.tiwendalaos {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.tiwentext1,
.tiwentext2,
.tiwentext3,
.tiwentext4 {
width: 10.8rem;
height: 1.474rem;
-webkit-overflow-scrolling: touch;
overflow: auto;
font-size: 0.45rem;
position: absolute;
margin: 0 auto;
left: 1.6rem;
top: 16rem;
background: rgba(123, 116, 116, 0.35);
border-radius: 0.2rem;
padding: 0.25rem;
font-size: 0.45rem;
box-sizing: border-box;
}
.tiwentext2 {
top: 18rem !important;
}
.tiwentext3 {
top: 20rem !important;
}
.tiwentext4 {
top: 6rem !important;
}
</style>
<body>
<div class="box tiwendalao">
<div class="tiwendalaos">
<textarea name="" rows="" cols="" class="tiwentext1 anzhuoinp"></textarea>
<textarea name="" rows="" cols="" class="tiwentext2 anzhuoinp"></textarea>
<textarea name="" rows="" cols="" class="tiwentext3 anzhuoinp"></textarea>
<textarea name="" rows="" cols="" class="tiwentext4 anzhuoinp"></textarea>
</div>
</div>
</body>
<script type="text/javascript">
var suoyin;
var yuansutopheight
$(".anzhuoinp").click(function() {
suoyin = $(".anzhuoinp").index(this);
yuansutopheight = $('.anzhuoinp').eq(suoyin).offset().top;
})
//userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值
var u = navigator.userAgent;
//Android终端
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
//iOS终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// alert(clientHeight);
$(window).on('resize', function(e) {
var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var jianpangaodu = clientHeight - nowClientHeight;
var yaozoude = yuansutopheight - nowClientHeight + $('.anzhuoinp').outerHeight();
// alert(nowClientHeight);
if(isAndroid) {
//如果为Android
if(clientHeight > nowClientHeight && yuansutopheight - nowClientHeight > 0) {
$(".tiwendalaos").animate({
top: -yaozoude
});
} else {
$(".tiwendalaos").animate({
top: 0
});
}
}
});
</script>
</html>