ios12中遇到的帶input彈窗的錯(cuò)位問(wèn)題的解決方法
問(wèn)題描述:
使用fixed定位的彈窗,在ios12的系統(tǒng)里,軟鍵盤(pán)調(diào)起后,頁(yè)面整體上移,當(dāng)軟鍵盤(pán)消失時(shí),視覺(jué)上頁(yè)面已經(jīng)回到原始位置,但其實(shí)彈窗的焦點(diǎn)位置仍在軟鍵盤(pán)調(diào)起時(shí)的位置。
解決辦法:
這也是參考某位大佬的解決辦法
document.body.addEventListener('focusin', () => { // 軟鍵盤(pán)彈出的事件處理 this.isReset = false }) document.body.addEventListener('focusout', () => { // 軟鍵盤(pán)收起的事件處理 this.isReset = true setTimeout(() => { // 當(dāng)焦點(diǎn)在彈出層的輸入框之間切換時(shí)先不歸位 if (this.isReset) { window.scroll(0, 0) // 失焦后強(qiáng)制讓頁(yè)面歸位 } }, 300) })
嘗試解決的其他方法
嘗試不使用fix定位,選擇的absolute,判斷input失焦時(shí),使用window.scroll(),但是需要解決的問(wèn)題很多
- 不同手機(jī)的input框在軟鍵盤(pán)收起時(shí)情況不一樣。蘋(píng)果手機(jī)軟鍵盤(pán)收起時(shí),input框就失焦,但是小米手機(jī)鍵盤(pán)收起時(shí),input框不失焦
- 使用absolute定位后,軟鍵盤(pán)出現(xiàn)頁(yè)面會(huì)上移,軟鍵盤(pán)消失時(shí),頁(yè)面不能恢復(fù)原來(lái)的位置
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS應(yīng)用開(kāi)發(fā)中StoryBoard搭建UI界面的基本使用講解
這篇文章主要介紹了iOS應(yīng)用開(kāi)發(fā)中StoryBoard搭建UI界面的基本使用,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-02-02IOS 開(kāi)發(fā)之ios視頻截屏的實(shí)現(xiàn)代碼
這篇文章主要介紹了IOS 開(kāi)發(fā)之ios視頻截屏的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-07-07如何通過(guò)Objective-C的枚舉學(xué)習(xí)iOS中位操作.md詳解
這篇文章主要給大家介紹了關(guān)于如何通過(guò)Objective-C的枚舉學(xué)習(xí)iOS中位操作.md的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位iOS開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03IOS NSNotification 鍵盤(pán)遮擋問(wèn)題的解決辦法
這篇文章主要介紹了IOS NSNotification 鍵盤(pán)遮擋問(wèn)題的解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家,解決這樣的問(wèn)題,需要的朋友可以參考下2017-09-09如何實(shí)現(xiàn)IOS_SearchBar搜索欄及關(guān)鍵字高亮
本文通過(guò)實(shí)例代碼演示如何實(shí)現(xiàn)IOS搜索欄及搜索關(guān)鍵字高亮,效果很棒,小編覺(jué)得對(duì)大家的學(xué)習(xí)會(huì)很有幫助,現(xiàn)在分享給大家,有需要的可以參考學(xué)習(xí)。2016-08-08ios啟動(dòng)頁(yè)強(qiáng)制豎屏(進(jìn)入App后允許橫屏與豎屏)
最近工作遇到這樣一個(gè)需要,當(dāng)進(jìn)入啟動(dòng)頁(yè)需要強(qiáng)制豎屏,而進(jìn)入APP后就允許橫屏與豎屏,通過(guò)查找相關(guān)的資料找到了解決的方法,所以將實(shí)現(xiàn)的方法整理后分享出來(lái),需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2017-03-03iOS開(kāi)發(fā)之tableView cell的展開(kāi)收回功能實(shí)現(xiàn)代碼
本文介紹了iOS開(kāi)發(fā)之tableView cell的展開(kāi)收回功能實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01