相信大家在做移動端的頁面的時候，會遇到蘋果手機下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, 因為當你的軟鍵盤彈出，你的頁面一定會變形，當軟盤收起時，頁面又正常。（本屌踩過此坑，希望能幫助到大家）
