ios12中遇到的帶input彈窗的錯(cuò)位問(wèn)題的解決方法

更新時(shí)間：2019年05月18日 13:21:56 作者：我是大哥的女朋友

這篇文章主要介紹了ios12中遇到的帶input彈窗的錯(cuò)位問(wèn)題的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

問(wèn)題描述：

使用fixed定位的彈窗，在ios12的系統(tǒng)里，軟鍵盤調(diào)起后，頁(yè)面整體上移，當(dāng)軟鍵盤消失時(shí)，視覺上頁(yè)面已經(jīng)回到原始位置，但其實(shí)彈窗的焦點(diǎn)位置仍在軟鍵盤調(diào)起時(shí)的位置。

解決辦法：

這也是參考某位大佬的解決辦法

document.body.addEventListener('focusin', () => {
  // 軟鍵盤彈出的事件處理
  this.isReset = false
})
document.body.addEventListener('focusout', () => {
  // 軟鍵盤收起的事件處理
  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框在軟鍵盤收起時(shí)情況不一樣。蘋果手機(jī)軟鍵盤收起時(shí)，input框就失焦，但是小米手機(jī)鍵盤收起時(shí)，input框不失焦
使用absolute定位后，軟鍵盤出現(xiàn)頁(yè)面會(huì)上移，軟鍵盤消失時(shí)，頁(yè)面不能恢復(fù)原來(lái)的位置

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

iOS開發(fā)之tableView cell的展開收回功能實(shí)現(xiàn)代碼
本文介紹了iOS開發(fā)之tableView cell的展開收回功能實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
IOS UI學(xué)習(xí)教程之設(shè)置UITextField各種屬性
這篇文章主要為大家詳細(xì)介紹了IOS UI學(xué)習(xí)教程之設(shè)置UITextField各種屬性，感興趣的小伙伴們可以參考一下
2016-03-03
iOS學(xué)習(xí)教程之UIView中坐標(biāo)轉(zhuǎn)換詳解
這篇文章主要給大家介紹了關(guān)于iOS UIView中坐標(biāo)轉(zhuǎn)換的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起看看吧。
2017-05-05
iOS archive保存圖片到本地的方法
這篇文章主要為大家詳細(xì)介紹了iOS archive保存圖片到本地的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
iOS緩存文件大小顯示功能和一鍵清理功能的實(shí)現(xiàn)方法
緩存占用了系統(tǒng)的大量空間，如何實(shí)時(shí)動(dòng)態(tài)的顯示緩存的大小，使用戶清晰的了解緩存的積累情況，有效的進(jìn)行一鍵清理呢？下面小編通過(guò)本文給大家介紹iOS緩存文件大小顯示功能和一鍵清理功能的實(shí)現(xiàn)方法，一起看看吧
2016-10-10
IOS 仿Android吐司提示框的實(shí)例(分享)
下面小編就為大家分享一篇IOS 仿Android吐司提示框的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
淺談iOS關(guān)于頭文件的導(dǎo)入問(wèn)題
本篇文章主要介紹了淺談iOS關(guān)于頭文件的導(dǎo)入問(wèn)題，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-04-04
IOS LaunchScreen設(shè)置啟動(dòng)圖片與啟動(dòng)頁(yè)停留時(shí)間詳解
這篇文章主要介紹了IOS LaunchScreen設(shè)置啟動(dòng)圖片與啟動(dòng)頁(yè)停留時(shí)間詳解的相關(guān)資料,需要的朋友可以參考下
2017-02-02
iOS中視頻播放器的簡(jiǎn)單封裝詳解
要實(shí)現(xiàn)封裝視頻播放器，首先需要實(shí)現(xiàn)視頻播放器，然后再去考慮怎樣封裝可以讓以后自己使用起來(lái)方便快捷。iOS9之前可以使用MediaPlayer來(lái)進(jìn)行視頻的播放，iOS9之后系統(tǒng)推薦使用AVFoundation框架實(shí)現(xiàn)視頻的播放。下面通過(guò)本文來(lái)看看詳細(xì)的介紹吧。
2016-10-10
iOS UIScrollView和控制器返回手勢(shì)沖突解決方法
這篇文章主要介紹了iOS UIScrollView和控制器返回手勢(shì)沖突解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02