https://my.oschina.net/cjlice/blog/625526
摘要: 本文討論H5應用的輸入框被軟鍵盤遮擋的解決方案
WebAPP輸入框被軟鍵盤遮擋腫么辦？
當輸入框處於半屏以下位置軟鍵盤彈出時遇到的坑：
1.輸入框被遮擋，看不見輸入的內容
2.頁面自動上移，但收回軟鍵盤時頁面少了一截
3.IOS系統上使用JRoll，IScroll等滑動方案時，光標不隨輸入框移動
4.軟鍵盤彈出時窗口變小元素錯位
解決方案：
1、能不用滑動插件就不用。
2、IOS->使用overflow:auto;-webkit-overflow-scrolling;盡量避免使用JRoll等插件
3、Android->使用JRoll的fixedinput插件
建議從設計角度解決被遮擋的問題，見下文。
目前手機系統、瀏覽器系統眾多，版本各異，表現詭異，兼容起來不比當年IE6輕松，麻辣個蛋，好不容易從PC開發跳到移動開發，還以為手機瀏覽器加了個-webkit前綴是萬能的，握勒個去，誰知滑動卡頓、fixed走位、監聽安卓返回鍵、某些機型focus喚不起軟鍵盤、輸入框被軟鍵盤遮擋、安卓4.4以下不支持date等表單類型、濫用css3動畫整個APP都不好了等等問題接踵而至，前端開發道遠而任重啊~~呃。拿我最近的一個項目舉個粟子。
對於設計師來說，表單理所當然一直往下排，但對於要實現功能的程序猿來說，苦逼啊。上圖至少三屏才能顯示完，輸入框被軟鍵盤遮擋不可避免，還要處理各種兼容問題，軟鍵盤彈出時有的瀏覽器不改變窗口高度，有的改變窗口高度后索性不改回來了，鍵盤收回來時頁面縮了一截，腫么辦？
要從根源上解決這個問題，必須要讓輸入框不被遮擋，這就要從設計入手，修改設計有兩種方案，一是分頁處理，二是彈窗輸入。
分頁處理
絕不讓輸入框位於下半屏
彈窗輸入
浮起來讓你輸個夠
如果大家還有什么更好的方案，歡迎一起交流。