相信大家在做移动端的页面的时候，会遇到苹果手机下input输入框录入内容的时候，软键盘无法复原的问题，如下：
这可怎么办？可千万不要用fix定位该页面，这样在IOS下光标会有错位，很恶心。当然，相信很多人会和本屌一样，百度。
网上各种计算软键盘的高度，然后让body去回滚，自己试了下，效果不理想。
怎么办？就只能自己想办法了。后来我发现一个问题，如果这个输入框在页面的顶部， 这时候当软件盘弹出来的时候，页面不会被顶上去，这个就好办了，那我就在页面的顶部放一个input呗。当我的下面的input输入完成，即input 触发onblur事件的时候，让顶部的input 获得焦点。这个时候页面就会正常复原了……（注意顶的input记得控制下样式）整体的demo代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=750,user-scalable=no" />
<title>IOS下软键盘收起的时候，页面被顶上去，无法还原的终极解决方案</title>
<style>
*{margin: 0;padding: 0;}
.zmiti-box{
width: 100%;
height: 100%;
position: absolute;;
left: 0;
top: 0;
background: red;
}
.input1{
position: absolute;
top: 50vh;
width: 650px;
left: 50px;
font-size: 32px;
height: 70px;
line-height: 70px;
padding-left: 20px;
box-sizing: border-box;;
}
.zmiti-hide-input{
width: 0;
height: 0;
z-index: -1;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class='zmiti-box'>
<input type="text" class='zmiti-hide-input'>
<input type="text" class='input1'>
</div>
<script>
(function(document){
var input1 = document.querySelector('.input1');
var hideInput = document.querySelector('.zmiti-hide-input');
input1.addEventListener('blur',()=>{
hideInput.focus();
setTimeout(()=>{
hideInput.blur();
},10)
});
})(document);
</script>
</body>
</html>
修改后的效果如下：
最后要注意的是：顶部的input获取焦点的时候，在android下软键盘会弹出，所以当顶部的input获取焦点后，要释放焦点。
完美解决。
写在最后：
android下软键盘弹出会触发window.onresize事件（ios 则不会），页面整个的高度会变小，于是，尤其是在有录入框的页面中，不要使用vh（100vh=页面高度）这样的单位布局，不要用vh,不要用vh, 因为当你的软键盘弹出，你的页面一定会变形，当软盘收起时，页面又正常。（本屌踩过此坑，希望能帮助到大家）