關於使用input調出系統鍵盤,頁面上移滑動問題

最近使用input輸入框 寫了移動端的項目  有以下幾個問題

1、調出鍵盤,頁面沒有上移 ,鍵盤蓋着了輸入框。

是因爲樣式中  定位的問題   元素使用  fixed定位   但是top  一定不能設置爲固定值  建議使用  %   。還有其他方法,下面會詳細介紹。

2、第一次的需求是  父盒子背景圖  不能跟着上移   只有表單部分可以上移

這樣書寫樣式可以讓content 部分上移  

3、後來我 們的需求變了(很痛苦)  要求背景圖部分也要跟着上移。

這是候代碼就需要改變了

改成這個樣式之後,問題就來了   鍵盤上面的內容竟然可以上下滑動    

所以就要解決這個問題

方法一:

思路:監聽頁面鍵盤調起來時間   讓父盒子的  top  上移一個  -420px    。

缺點:不同的設備顯示就不一樣,總有那麼幾個設備的鍵盤能遮着輸入框的。

用變量控制一個樣式   這個樣式設置  top: -420px;

當鍵盤彈出的時候 應用這個樣式  當鍵盤落下的時候   不應用這個樣式。

方法二:

思路:動態獲取鍵盤彈起的高度  讓父盒子上移   

缺點: 還是有那麼幾個特殊的  就不行。

方法三:

後來在網上找到了  鍵盤彈起   下面三行代碼   就解決了  頁面可以滑動的問題。