最近使用input輸入框 寫了移動端的項目 有以下幾個問題
1、調出鍵盤,頁面沒有上移 ,鍵盤蓋着了輸入框。
是因爲樣式中 定位的問題 元素使用 fixed定位 但是top 一定不能設置爲固定值 建議使用 % 。還有其他方法,下面會詳細介紹。
2、第一次的需求是 父盒子背景圖 不能跟着上移 只有表單部分可以上移
這樣書寫樣式可以讓content 部分上移
3、後來我 們的需求變了(很痛苦) 要求背景圖部分也要跟着上移。
這是候代碼就需要改變了
改成這個樣式之後,問題就來了 鍵盤上面的內容竟然可以上下滑動
所以就要解決這個問題
方法一:
思路:監聽頁面鍵盤調起來時間 讓父盒子的 top 上移一個 -420px 。
缺點:不同的設備顯示就不一樣,總有那麼幾個設備的鍵盤能遮着輸入框的。
用變量控制一個樣式 這個樣式設置 top: -420px;
當鍵盤彈出的時候 應用這個樣式 當鍵盤落下的時候 不應用這個樣式。
方法二:
思路:動態獲取鍵盤彈起的高度 讓父盒子上移
缺點: 還是有那麼幾個特殊的 就不行。
方法三:
後來在網上找到了 鍵盤彈起 下面三行代碼 就解決了 頁面可以滑動的問題。