資訊專欄INFORMATION COLUMN
摘要：瀏覽器后，被軟鍵盤遮蓋的問題，已經(jīng)有好多人問相關(guān)的問題，應(yīng)該是問的角度不一樣，還的再次提出咯。如上循環(huán)，問題無(wú)法解決。
safari瀏覽器fixed后，被軟鍵盤遮蓋的問題，已經(jīng)有好多人問相關(guān)的問題，應(yīng)該是問的角度不一樣，還的再次提出咯。
問題描述測(cè)試環(huán)境：ios 10.2/10.3
簡(jiǎn)單來(lái)說(shuō)就是在html5頁(yè)面中底部有個(gè)fixed的區(qū)域，如圖
在點(diǎn)擊輸入框的時(shí)候，軟鍵盤彈出，遮蓋了fixed區(qū)域（這里頁(yè)面整體上移了），如圖
但是當(dāng)你點(diǎn)擊“完成”讓軟鍵盤收起，再次點(diǎn)擊輸入框的時(shí)候，what？一切正常了～！如圖（就是要這樣子的嘛，之后收起彈出軟鍵盤都正常了，不會(huì)遮蓋fixed底部區(qū)域了?。?/p>
但是，但是，還沒完，在輸入框里隨便輸入點(diǎn)內(nèi)容，點(diǎn)擊“提交”，關(guān)閉軟鍵盤，之后再次點(diǎn)擊輸入框，問題依舊～，軟鍵盤再次遮擋fixed區(qū)域。
關(guān)閉軟件票，再次點(diǎn)擊輸入框，就不會(huì)遮擋fixed區(qū)域了。
如上循環(huán)，問題無(wú)法解決。
測(cè)試代碼如下代碼很簡(jiǎn)單，但還是貼一下，方便測(cè)試，只需要復(fù)制粘貼到本機(jī)即可測(cè)試上述現(xiàn)象
fixed測(cè)試頁(yè)面
頂部固定區(qū)域
嘗試過(guò)的解決方案
搜索后有很多解決方法，但發(fā)現(xiàn)他們都沒解決上述問題，
暫時(shí)的想法，繞過(guò)fixed，用戶點(diǎn)擊輸入框后，隱藏此區(qū)域，在頂部出現(xiàn)更大的輸入?yún)^(qū)域以讓用戶輸入內(nèi)容。
IOS中彈出鍵盤后出現(xiàn)fixed失效現(xiàn)象的解決方案
移動(dòng)端解決fixed和input獲取焦點(diǎn)軟鍵盤彈出影響定位的問題
虛擬鍵盤與fixed帶給移動(dòng)端的痛
使用iScroll.js解決ios4下不支持position:fixed的問題
好，至此，問題描述完畢，期待有牛人更好解決方案
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111816.html
摘要：參考地址首先，是這樣的布局父容器里面放一個(gè)輸入框和一個(gè)按鈕思路是父容器定位，為，為布局在其他事件觸發(fā)輸入框出現(xiàn)的時(shí)候例如一個(gè)評(píng)論的，父容器值變?yōu)椋卉涙I盤頂上來(lái)。 參考地址： https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先，是這樣的布局：父容器里面放一個(gè)輸入框 和一個(gè)按鈕 思路是：父容器fi...
摘要：?jiǎn)栴}描述吸底的聚焦后，彈出的軟鍵盤將吸底的元素完全或者部分遮擋。然后導(dǎo)致元素被軟鍵盤遮擋高度為的高度。軟鍵盤的高度變化會(huì)觸發(fā)瀏覽器的事件。 移動(dòng)端做一個(gè)吸底的輸入框，首先需要注意兩大類設(shè)備，安卓和ios下的瀏覽器。特別是在ios下，輸入框聚焦時(shí)fixed定位會(huì)出現(xiàn)一些問題，網(wǎng)上也有許多相關(guān)的帖子，在此就不再贅述了。今天要提及的是小米全面屏下的miui瀏覽器。問題描述：吸底的input聚...
摘要：?jiǎn)栴}描述吸底的聚焦后，彈出的軟鍵盤將吸底的元素完全或者部分遮擋。然后導(dǎo)致元素被軟鍵盤遮擋高度為的高度。軟鍵盤的高度變化會(huì)觸發(fā)瀏覽器的事件。 移動(dòng)端做一個(gè)吸底的輸入框，首先需要注意兩大類設(shè)備，安卓和ios下的瀏覽器。特別是在ios下，輸入框聚焦時(shí)fixed定位會(huì)出現(xiàn)一些問題，網(wǎng)上也有許多相關(guān)的帖子，在此就不再贅述了。今天要提及的是小米全面屏下的miui瀏覽器。問題描述：吸底的input聚...
閱讀 2236·2021-09-07 10:24
閱讀 2197·2019-08-30 15:55
閱讀 2202·2019-08-30 15:43
閱讀 763·2019-08-29 15:25
閱讀 1189·2019-08-29 12:19
閱讀 2025·2019-08-23 18:32
閱讀 1631·2019-08-23 17:59
閱讀 1042·2019-08-23 12:22
