頁面是個長頁面,點擊頁面不同部分,會彈出彈窗,如果用absolute定位,那麼彈窗的位置就難以定位,因而決定採用fixed定位,此時在IOS 11.2.x 系統中就 會出現點擊input光標位置異常的問題。
異常如圖所示:
原因分析
input的父元素是採用fixed定位的元素,此時input輸入框在IOS系統存在bug,input元素獲得焦點,吊起鍵盤的時候,頁面上fixed定位的元素會被上推,但是光標卻留在了原地,造成錯位的現象。
解決方案
當點擊激活彈窗按鈕的時候,給body設置fixed定位,讓其也脫離標準流文檔,關閉彈窗的時候,讓其恢復relative定位。
代碼示意:
body {
position: relative;
}
body.fixed {
position: fixed;
width: 100%
}
//打開彈窗
openBtn.tap(function(){
$('body').addClass('fixed')
})
//關閉彈窗
closeBtn.tap(function() {
$('body').removeClass('fixed')
})
這裏會存在一個小小的問題,就是彈框彈出後,初次點擊一次input框的時候,會彈出鍵盤,能正常輸入,但是光標不顯示,如果點擊兩次input輸入框,就會顯示光標。
彈出了鍵盤,能輸入,但是光標不顯示:
再次點擊,就一切正常:
後來諮詢了一些前端童鞋,很多是採用這種方式,點擊一次光標不顯示的問題,繫系統BUG,後續IOS版本,蘋果已經修復該BUG。
目前採用以上方式,如果發現有更好的方式,會後續更新。