相信大家在做移動端的頁面的時候暖侨，會遇到蘋果手機(jī)下input輸入框錄入內(nèi)容的時候，軟鍵盤無法復(fù)原的問題崇渗，如下：
這可怎么辦字逗？可千萬不要用fix定位該頁面，這樣在IOS下光標(biāo)會有錯位宅广，很惡心葫掉。當(dāng)然，相信很多人會和本屌一樣跟狱，百度俭厚。
網(wǎng)上各種計(jì)算軟鍵盤的高度，然后讓body去回滾驶臊，自己試了下挪挤，效果不理想。
怎么辦关翎？就只能自己想辦法了扛门。后來我發(fā)現(xiàn)一個問題，如果這個輸入框在頁面的頂部纵寝， 這時候當(dāng)軟件盤彈出來的時候论寨，頁面不會被頂上去，這個就好辦了店雅，那我就在頁面的頂部放一個input唄政基。當(dāng)我的下面的input輸入完成，即input 觸發(fā)onblur事件的時候闹啦，讓頂部的input 獲得焦點(diǎn)沮明。這個時候頁面就會正常復(fù)原了……（注意頂?shù)膇nput記得控制下樣式）整體的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獲取焦點(diǎn)的時候荐健，在android下軟鍵盤會彈出酱畅，所以當(dāng)頂部的input獲取焦點(diǎn)后，要釋放焦點(diǎn)江场。
完美解決纺酸。
寫在最后：
android下軟鍵盤彈出會觸發(fā)window.onresize事件（ios 則不會），頁面整個的高度會變小址否，于是餐蔬，尤其是在有錄入框的頁面中，不要使用vh（100vh=頁面高度）這樣的單位布局佑附，不要用vh,不要用vh, 因?yàn)楫?dāng)你的軟鍵盤彈出樊诺，你的頁面一定會變形，當(dāng)軟盤收起時音同，頁面又正常词爬。（本屌踩過此坑，希望能幫助到大家）
