WebAPP輸入框被軟鍵盤遮擋腫麼辦？

WebAPP輸入框被軟鍵盤遮擋腫麼辦？

當輸入框處於半屏如下位置軟鍵盤彈出時遇到的坑：
1.輸入框被遮擋，看不見輸入的內容
2.頁面自動上移，但收回軟鍵盤時頁面少了一截
3.IOS系統上使用JRoll，IScroll等滑動方案時，光標不隨輸入框移動
4.軟鍵盤彈出時窗口變小元素錯位

解決方案：
一、能不用滑動插件就不用。
二、IOS->使用overflow:auto;-webkit-overflow-scrolling;儘可能避免使用JRoll等插件
三、Android->使用JRoll的fixedinput插件

 

建議從設計角度解決被遮擋的問題，見下文。

目前手機系統、瀏覽器系統衆多，版本各異，表現詭異，兼容起來不比當年IE6輕鬆，麻辣個蛋，好不容易從PC開發跳到移動開發，還覺得手機瀏覽器加了個-webkit前綴是萬能的，握勒個去，誰知滑動卡頓、fixed走位、監聽安卓返回鍵、某些機型focus喚不起軟鍵盤、輸入框被軟鍵盤遮擋、安卓4.4如下不支持date等表單類型、濫用css3動畫整個APP都很差了等等問題接踵而至，前端開發道遠而任重啊~~呃。拿我最近的一個項目舉個粟子。

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

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

分頁處理

毫不讓輸入框位於下半屏

   

   

   

彈窗輸入

浮起來讓你輸個夠

若是你們還有什麼更好的方案，歡迎一塊兒交流。

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