在做文章評論的功能時,會遇到很多兼容性的問題查邢,在不同機(jī)型上的表現(xiàn)也很不一致票渠,總結(jié)了以下這些問題庵朝。
1. 日期問題
對于yyyy-mm-dd hh:mm:ss 這種格式在ios系統(tǒng)不識別拂檩。
時間格式化的時候侮腹,在瀏覽器端處理好好的,到了手機(jī)端广恢,就變成NAN凯旋,或者null呀潭,這種情況钉迷,是ios系統(tǒng)不能轉(zhuǎn)化這種類型的時間至非。
let date = new Date('2019-02-28 18:33:24'); // null
解決方案:轉(zhuǎn)成 yyyy/mm/dd hh:mm:ss 這種格式就可以了。
replace(/-/g, "/")
2. 鍵盤收起糠聪,頁面卡住荒椭,不回落
ios12上,發(fā)現(xiàn)鍵盤收起的時候舰蟆,頁面會卡主趣惠,留下底部一片空白,稍微動一下頁面身害,就會恢復(fù)味悄。
這種問題,在網(wǎng)上查了很多解決方案塌鸯,大致是在blur事件中侍瑟,讓頁面滾動一下
window.scrollTo(0, scroll);
但是有一個很嚴(yán)重的問題:如果頁面上有按鈕需要操作 ,例如丙猬,評論的輸入框+發(fā)布按鈕涨颜,輸入完文字,點(diǎn)擊“發(fā)布”茧球,觸發(fā)click事件的時候庭瑰,會導(dǎo)致頁面先觸發(fā)blur事件抢埋,鍵盤回落弹灭,然后一切就結(jié)束了揪垄。。福侈。酒来。按鈕點(diǎn)擊沒有起任何作用。
解決方案: 把click事件更換成ontouchstart 可以解決這個問題肪凛。 ontouchstart 事件優(yōu)于click事件觸發(fā)。
3. ios12在微信小程序的webview伟墙,鍵盤收回,頁面底部會留白
這個問題懷疑是頁面的scroll設(shè)置了auto導(dǎo)致的戳葵。
解決方案:滾動一下頁面就乓,請參考鏈接,代碼有效。
4. iphone fix 失效生蚁,導(dǎo)致一些機(jī)器上textarea光標(biāo)偏移
解決方案: 所有兄弟元素變成absolute噩翠, 父元素overflow:auto邦投。
父元素:
height: 100vh;
position: relative;
overflow: auto;
兄弟元素:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x: visible;
overflow-y: auto;
padding-bottom: 10px;
z-index: 1;
5. 鍵盤遮擋輸入框
輸入框如果使用了fixed固定在底部,鍵盤頂起的時候志衣,iphone上fixed會失效,導(dǎo)致頁面滾動輸入框會隨著頁面滾動念脯,并且在部分機(jī)型上,輸入框偶爾會被鍵盤遮擋绿店,這種偶現(xiàn)的問題,很不友好惯吕。
解決方案: 放棄使用fixed布局,頁面如果有滾動淹魄,也放棄absolute堡距,如果強(qiáng)行要使用absolute甲锡,請參考上一條光標(biāo)偏移羽戒。建議使用flex布局,兼容性會得到解決缸废。
當(dāng)然,如果遇到以上這些問題企量,說明產(chǎn)品設(shè)計(jì)就很不合理亡电,如果必要的話,還是要更換設(shè)計(jì)份乒,改成input不需要被鍵盤頂起的設(shè)計(jì)腕唧,這些兼容性的解決方案,也不并不能完美的解決所有機(jī)型的問題枣接。
小伙伴可以在公號【grain先森】后臺回復(fù)【190301】獲取130套簡歷模板。