IOS下软键盘收起的时候，页面被顶上去，无法复原的终极解决方案

相信大家在做移动端的页面的时候，会遇到苹果手机下input输入框录入内容的时候，软键盘无法复原的问题，如下：

这可怎么办？可千万不要用fix定位该页面，这样在IOS下光标会有错位，很恶心。当然，相信很多人会和本屌一样，百度。

网上各种计算软键盘的高度，然后让body去回滚，自己试了下，效果不理想。

怎么办？就只能自己想办法了。后来我发现一个问题，如果这个输入框在页面的顶部， 这时候当软件盘弹出来的时候，页面不会被顶上去，这个就好办了，那我就在页面的顶部放一个input呗。当我的下面的input输入完成，即input 触发onblur事件的时候，让顶部的input 获得焦点。这个时候页面就会正常复原了……（注意顶的input记得控制下样式）整体的demo代码如下：

IOS下软键盘收起的时候，页面被顶上去，无法还原的终极解决方案

*{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;

}

(function(document){

var input1 = document.querySelector('.input1');

var hideInput = document.querySelector('.zmiti-hide-input');

input1.addEventListener('blur',()=>{

hideInput.focus();

setTimeout(()=>{

hideInput.blur();

},10)

});

})(document);

修改后的效果如下：

最后要注意的是：顶部的input获取焦点的时候，在android下软键盘会弹出，所以当顶部的input获取焦点后，要释放焦点。

完美解决。

写在最后：

android下软键盘弹出会触发window.onresize事件（ios 则不会），页面整个的高度会变小，于是，尤其是在有录入框的页面中，不要使用vh（100vh=页面高度）这样的单位布局，不要用vh,不要用vh, 因为当你的软键盘弹出，你的页面一定会变形，当软盘收起时，页面又正常。（本屌踩过此坑，希望能帮助到大家）