safari瀏覽器fixed后，被軟鍵盤遮蓋的問題—【未解決】

miya 發布于2019-08-29 12:19 / 1043人閱讀

摘要：瀏覽器后，被軟鍵盤遮蓋的問題，已經有好多人問相關的問題，應該是問的角度不一樣，還的再次提出咯。如上循環，問題無法解決。

safari瀏覽器fixed后，被軟鍵盤遮蓋的問題，已經有好多人問相關的問題，應該是問的角度不一樣，還的再次提出咯。

問題描述

測試環境：ios 10.2/10.3

簡單來說就是在html5頁面中底部有個fixed的區域，如圖

在點擊輸入框的時候，軟鍵盤彈出，遮蓋了fixed區域（這里頁面整體上移了），如圖

但是當你點擊“完成”讓軟鍵盤收起，再次點擊輸入框的時候，what？一切正常了～！如圖（就是要這樣子的嘛，之后收起彈出軟鍵盤都正常了，不會遮蓋fixed底部區域了！）

但是，但是，還沒完，在輸入框里隨便輸入點內容，點擊“提交”，關閉軟鍵盤，之后再次點擊輸入框，問題依舊～，軟鍵盤再次遮擋fixed區域。

關閉軟件票，再次點擊輸入框，就不會遮擋fixed區域了。

如上循環，問題無法解決。

測試代碼如下

代碼很簡單，但還是貼一下，方便測試，只需要復制粘貼到本機即可測試上述現象





    
    
    fixed測試頁面
    
    
    

    





    頂部固定區域

嘗試過的解決方案

搜索后有很多解決方法，但發現他們都沒解決上述問題，

暫時的想法，繞過fixed，用戶點擊輸入框后，隱藏此區域，在頂部出現更大的輸入區域以讓用戶輸入內容。

IOS中彈出鍵盤后出現fixed失效現象的解決方案

移動端解決fixed和input獲取焦點軟鍵盤彈出影響定位的問題

虛擬鍵盤與fixed帶給移動端的痛

使用iScroll.js解決ios4下不支持position:fixed的問題

好，至此，問題描述完畢，期待有牛人更好解決方案

GPU云服務器云服務器解決問題的方法加皮膚后的詭異問題云計算解決的問題短視頻問題的解決措施

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111816.html

ios輸入框的坑(軟鍵盤彈出不靈敏、輸入法影響彈出高度)

摘要：參考地址首先，是這樣的布局父容器里面放一個輸入框和一個按鈕思路是父容器定位，為，為布局在其他事件觸發輸入框出現的時候例如一個評論的，父容器值變為，被軟鍵盤頂上來。參考地址： https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先，是這樣的布局：父容器里面放一個輸入框和一個按鈕思路是：父容器fi...

vvpvvp 2019-08-26 10:56 評論0 收藏0
小米全面屏手機瀏覽器的input、textarea吸底被遮擋

摘要：問題描述吸底的聚焦后，彈出的軟鍵盤將吸底的元素完全或者部分遮擋。然后導致元素被軟鍵盤遮擋高度為的高度。軟鍵盤的高度變化會觸發瀏覽器的事件。移動端做一個吸底的輸入框，首先需要注意兩大類設備，安卓和ios下的瀏覽器。特別是在ios下，輸入框聚焦時fixed定位會出現一些問題，網上也有許多相關的帖子，在此就不再贅述了。今天要提及的是小米全面屏下的miui瀏覽器。問題描述：吸底的input聚...

Winer 2019-08-23 15:35 評論0 收藏0
小米全面屏手機瀏覽器的input、textarea吸底被遮擋

摘要：問題描述吸底的聚焦后，彈出的軟鍵盤將吸底的元素完全或者部分遮擋。然后導致元素被軟鍵盤遮擋高度為的高度。軟鍵盤的高度變化會觸發瀏覽器的事件。移動端做一個吸底的輸入框，首先需要注意兩大類設備，安卓和ios下的瀏覽器。特別是在ios下，輸入框聚焦時fixed定位會出現一些問題，網上也有許多相關的帖子，在此就不再贅述了。今天要提及的是小米全面屏下的miui瀏覽器。問題描述：吸底的input聚...

Markxu 2019-08-30 15:56 評論0 收藏0