ios12中遇到的帶input彈窗的錯位問題

henry14 發布于2019-08-26 13:49 / 2650人閱讀

摘要：問題描述使用定位的彈窗，在的系統里，軟鍵盤調起后，頁面整體上移，當軟鍵盤消失時，視覺上頁面已經回到原始位置，但其實彈窗的焦點位置仍在軟鍵盤調起時的位置。

問題描述：

使用fixed定位的彈窗，在ios12的系統里，軟鍵盤調起后，頁面整體上移，當軟鍵盤消失時，視覺上頁面已經回到原始位置，但其實彈窗的焦點位置仍在軟鍵盤調起時的位置。

解決辦法：

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

document.body.addEventListener("focusin", () => {
    // 軟鍵盤彈出的事件處理
    this.isReset = false
})
document.body.addEventListener("focusout", () => {
    // 軟鍵盤收起的事件處理
    this.isReset = true
    setTimeout(() => {
        // 當焦點在彈出層的輸入框之間切換時先不歸位
        if (this.isReset) {
          window.scroll(0, 0) // 失焦后強制讓頁面歸位
        }
    }, 300)
})

嘗試解決的其他方法

嘗試不使用fix定位，選擇的absolute，判斷input失焦時，使用window.scroll()，但是需要解決的問題很多

不同手機的input框在軟鍵盤收起時情況不一樣。蘋果手機軟鍵盤收起時，input框就失焦，但是小米手機鍵盤收起時，input框不失焦

使用absolute定位后，軟鍵盤出現頁面會上移，軟鍵盤消失時，頁面不能恢復原來的位置

GPU云服務器云服務器 ios10遇到問題彈窗的js 使用遇到問題布局遇到的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109611.html

移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

galaxy_robot 2019-08-01 17:40 評論0 收藏0
移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

ysl_unh 2019-08-21 16:44 評論0 收藏0
移動彈窗基礎知識淺析——IOS彈窗體系

摘要：尤其是遇到二次確認等場景因此，打算從頭整理移動彈窗的基礎知識，以彈窗體系為切入點，從定義出發，對移動彈窗進行分類，然后分別分析每一類彈窗的應用場景，以及在使用過程中需要注意的點。摘要：最為常見的【彈窗】反而是最捉摸不定的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應該用哪種彈窗。尤其是遇到二次確認等場景…… 因此，打算從頭整理移動彈窗的基礎知識，以iOS彈窗體系為切入點，從...

jas0n 2019-06-28 10:58 評論0 收藏0
如何使用微信小程序開發一個彈窗頁面（附源碼）

摘要：在小程序的開發過程中，我們肯定會遇到開發一個彈窗頁面的情況，我們先看一下小程序官方對于彈窗頁面的解釋。首頁我們先看一下動態的效果圖我們首先看到的是首頁代碼原創作者小程序微信小程序開發者社區點擊進入彈窗演示頁面當然了，重點不在于此。在小程序的開發過程中，我們肯定會遇到開發一個彈窗頁面的情況，我們先看一下小程序官方對于彈窗頁面的解釋。API的接口如下showImg(https://seg...

劉玉平 2019-08-01 16:31 評論0 收藏0