1.問題一:當某輸入框獲取焦點時,彈起自定義時間插件,貌似很簡單一個功能众旗,但測試時問題來了,獲取焦點時鍵盤也會跟著一起彈出來趟畏,如下圖:
鍵盤也跟著彈出
贡歧,那么到這里你可能會有種給input標簽增加 readonly 屬性的想法旬昭,那么我們來試試效果如何巢掺,提供ios和Android的兩個截圖:
Android增加readonly屬性后的表現(xiàn)
恩,Android看著沒什么問題了逞壁,那我們來看看iOS
ios增加readonly屬性后的表現(xiàn)
看著好像也沒什么問題猎莲,但是仔細看屏幕下方绍弟,用戶還是可以操作鍵盤,what?我只是想隱藏個鍵盤啊著洼,so bad樟遣。靜下新來仔細想想此過程發(fā)生了什么而叼,當我們點擊input的時候,觸發(fā)focus事件豹悬,移動端focus事件會觸發(fā)鍵盤彈起葵陵,那么,在focus事件觸發(fā)時我們可不可以手動讓它觸發(fā)blur事件呢瞻佛,答案肯定是可以的脱篙,那么我們來試試:
觸發(fā)focus時手動blur
再看看ios效果
至此,完美解決伤柄。
2.問題二:填寫訂單頁面有很多的input框供用戶輸入信息涡尘,當鍵盤彈起時,底部"提交訂單"一欄使用的是fixed定位响迂,會被鍵盤頂起,如下圖:
底部被頂起
這里的解決方案是當focus被觸發(fā)時鍵盤會彈出细疚,這時候頁面就會發(fā)生scroll滾動蔗彤,我們只需監(jiān)聽resize的變化,然后對應(yīng)的變化時將底部隱藏疯兼,無變化時再顯示然遏,代碼如下:
代碼
讓我們來看看效果:
效果