>>>

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都不好了等等問題接踵而至，前端開發道遠而任重啊~~呃。拿我最近的一個專案舉個粟子。

對於設計師來說，表單理所當然一直往下排，但對於要實現功能的程式猿來說，苦逼啊。上圖至少三屏才能顯示完，輸入框被軟鍵盤遮擋不可避免，還要處理各種相容問題，軟鍵盤彈出時有的瀏覽器不改變視窗高度，有的改變視窗高度後索性不改回來了，鍵盤收回來時頁面縮了一截，腫麼辦？

要從根源上解決這個問題，必須要讓輸入框不被遮擋，這就要從設計入手，修改設計有兩種方案，一是分頁處理，二是彈窗輸入。

分頁處理

絕不讓輸入框位於下半屏

彈窗輸入

浮起來讓你輸個夠

如果大家還有什麼更好的方案，歡迎一起交流。

轉載請註明出處：http://my.oschina.net/cjlice/blog/625526

轉載於:https://my.oschina.net/cjlice/blog/625526