資訊專欄INFORMATION COLUMN
摘要：因?yàn)榻M件需要全屏展示，所以我設(shè)置了如下的同時(shí)，對(duì)原本的，我給它加上，避免彈出虛擬鍵盤。獲取輸入焦點(diǎn)之后，雖然沒有彈出虛擬鍵盤，但仍然是待輸入狀態(tài)。
首發(fā)我的博客，兩邊同步更新。
先說需求。東家讓我做個(gè)日歷組件，在手機(jī) Web 上用。組件的樣式是這樣的，很多地方都可以見到，比如南航國航的客戶端。
看起來并不復(fù)雜，事實(shí)上也是，基本上順順利利的開發(fā)完成，準(zhǔn)備交付。這里有個(gè)伏筆，開發(fā)中我按老習(xí)慣，使用桌面 Chrome，和實(shí)際生產(chǎn)環(huán)境不太一樣。不過我自然要去真機(jī)上測(cè)試，結(jié)果一測(cè)問題就出來了。
因?yàn)榻M件需要全屏展示，所以我設(shè)置了如下的CSS：
.date-picker {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: white;
z-index:1024;
}
同時(shí)，對(duì)原本的 ，我給它加上 readonly，避免彈出虛擬鍵盤。理論上，這樣的就可以了。但實(shí)測(cè)時(shí)，不滾屏的時(shí)候，組件彈出時(shí)尺寸是準(zhǔn)確的，蓋滿全屏；然則一旦滾屏，組件就會(huì)占據(jù)從頁面最上方到當(dāng)前最下面這截位置。大約相當(dāng)于 position:absolte;top:0 的效果。
如圖，可以看到組件占據(jù)了全屏，但實(shí)際是從頁面最上面開始的，定位有問題。用桌面 Safari 調(diào)試也可以看出來它的高度是 968，遠(yuǎn)大于正常的 667。
這很詭異，上下左右全為0，是上古巨獸 IE6 都支持的做法。iOS Safari 雖然 Bug 多多，不應(yīng)該連這個(gè)都有毛病啊。以 ios safari position fixed 為關(guān)鍵詞 Google 之，結(jié)果 iOS Safari 歷史不清白，當(dāng)年 iPhone 剛出的時(shí)候的確有定位問題，于是雖有滿屏的結(jié)果，但都不適用。
然后我想到找其它庫，比如 Bootstrap，它的 Modal 組件也是類似的效果。但是怎么測(cè)都正常，于是我只好一個(gè)樣式一個(gè)樣式修改，仍然沒有結(jié)果。
時(shí)間慢慢流逝，轉(zhuǎn)眼已經(jīng)凌晨2點(diǎn)了，就在我?guī)子艞壷H，突然發(fā)現(xiàn)，雖然組件彈出的時(shí)候定位有問題，但只要我點(diǎn)掉下面的完成，定位就會(huì)立刻恢復(fù)正常。
注意，就是那個(gè)“完成”。
問題至此已經(jīng)明朗：在 iOS Safari 里，即使 設(shè)置了 readonly，它仍然可以獲取輸入焦點(diǎn)。獲取輸入焦點(diǎn)之后，雖然沒有彈出虛擬鍵盤，但仍然是待輸入狀態(tài)。
此時(shí)頁面各種交互都是正常工作的，比如點(diǎn)擊、滾屏。唯獨(dú) position:fixed 定位有問題。點(diǎn)擊“完成”離開輸入狀態(tài)，Safari 自動(dòng)刷新頁面元素，定位就正常了。
于是我在組件彈出后，自動(dòng) input.blur()，使其失去焦點(diǎn)，組件的尺寸便正常無誤了。
總結(jié)移動(dòng)端 Web 開發(fā)總有各種各樣稀奇古怪的問題。有些好解決，有些不好解決，比如這個(gè)問題，很難定位：
歷史不清白，搜也搜不到
組件要求全屏，需要避免虛擬鍵盤，所以會(huì)改變默認(rèn)行為
其它情況下都是好的
我能想到的方案，就是想辦法，用所有能用的工具，排除掉所有其它問題，最終還是能搞出來的。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116527.html
摘要：二分析排查一步驟一使用搜索引擎我是在無意中發(fā)現(xiàn)該問題的，當(dāng)時(shí)觀察到的現(xiàn)象是綁定在上的事件有時(shí)會(huì)被觸發(fā)，有時(shí)會(huì)失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應(yīng)事件失效的原因。接下來的事很簡單，繼續(xù)搜索事件在頁面滾動(dòng)后失效。 如果你關(guān)注我應(yīng)該知道，我最近對(duì)PC端頁面進(jìn)行移動(dòng)適配。在這個(gè)過程中，為了節(jié)省用戶300ms的時(shí)間，同時(shí)給予用戶更及時(shí)的點(diǎn)擊反饋（這意味著更好的用戶...
摘要：二分析排查一步驟一使用搜索引擎我是在無意中發(fā)現(xiàn)該問題的，當(dāng)時(shí)觀察到的現(xiàn)象是綁定在上的事件有時(shí)會(huì)被觸發(fā)，有時(shí)會(huì)失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應(yīng)事件失效的原因。接下來的事很簡單，繼續(xù)搜索事件在頁面滾動(dòng)后失效。 如果你關(guān)注我應(yīng)該知道，我最近對(duì)PC端頁面進(jìn)行移動(dòng)適配。在這個(gè)過程中，為了節(jié)省用戶300ms的時(shí)間，同時(shí)給予用戶更及時(shí)的點(diǎn)擊反饋（這意味著更好的用戶...
摘要：瀏覽器后，被軟鍵盤遮蓋的問題，已經(jīng)有好多人問相關(guān)的問題，應(yīng)該是問的角度不一樣，還的再次提出咯。如上循環(huán)，問題無法解決。 safari瀏覽器fixed后，被軟鍵盤遮蓋的問題，已經(jīng)有好多人問相關(guān)的問題，應(yīng)該是問的角度不一樣，還的再次提出咯。 問題描述 測(cè)試環(huán)境：ios 10.2/10.3 簡單來說就是在html5頁面中底部有個(gè)fixed的區(qū)域，如圖 showImg(https://segm...
閱讀 2376·2021-09-22 15:15
閱讀 640·2021-09-02 15:11
閱讀 1784·2021-08-30 09:48
閱讀 1884·2019-08-30 15:56
閱讀 1480·2019-08-30 15:52
閱讀 2041·2019-08-30 15:44
閱讀 431·2019-08-29 16:29
閱讀 1537·2019-08-29 11:06
