資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}描述使用定位的彈窗，在的系統(tǒng)里，軟鍵盤(pán)調(diào)起后，頁(yè)面整體上移，當(dāng)軟鍵盤(pán)消失時(shí)，視覺(jué)上頁(yè)面已經(jīng)回到原始位置，但其實(shí)彈窗的焦點(diǎn)位置仍在軟鍵盤(pán)調(diào)起時(shí)的位置。
問(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)的位置
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109611.html
摘要：如何讓我們所開(kāi)發(fā)的手機(jī)頁(yè)面能有更好的交互體驗(yàn)，就是這篇文章的主旨移動(dòng)開(kāi)發(fā)問(wèn)題和優(yōu)化小結(jié)。關(guān)于和鼠標(biāo)事件的延遲說(shuō)明，我引用葉小釵大神博客里面的一張圖片，如下在手機(jī)上，的延遲將近。 1.前言 到目前為止，互聯(lián)網(wǎng)行業(yè)里，手機(jī)越來(lái)越智能化，移動(dòng)端占有的比例越來(lái)越高，尤其實(shí)在電商，新聞，廣告，游戲領(lǐng)域。用戶要求越來(lái)越高，網(wǎng)站功能越來(lái)越好，效果越來(lái)越炫酷，這就要求我們產(chǎn)品質(zhì)量越來(lái)越高，web前端開(kāi)...
摘要：如何讓我們所開(kāi)發(fā)的手機(jī)頁(yè)面能有更好的交互體驗(yàn)，就是這篇文章的主旨移動(dòng)開(kāi)發(fā)問(wèn)題和優(yōu)化小結(jié)。關(guān)于和鼠標(biāo)事件的延遲說(shuō)明，我引用葉小釵大神博客里面的一張圖片，如下在手機(jī)上，的延遲將近。 1.前言 到目前為止，互聯(lián)網(wǎng)行業(yè)里，手機(jī)越來(lái)越智能化，移動(dòng)端占有的比例越來(lái)越高，尤其實(shí)在電商，新聞，廣告，游戲領(lǐng)域。用戶要求越來(lái)越高，網(wǎng)站功能越來(lái)越好，效果越來(lái)越炫酷，這就要求我們產(chǎn)品質(zhì)量越來(lái)越高，web前端開(kāi)...
摘要：尤其是遇到二次確認(rèn)等場(chǎng)景因此，打算從頭整理移動(dòng)彈窗的基礎(chǔ)知識(shí)，以彈窗體系為切入點(diǎn)，從定義出發(fā)，對(duì)移動(dòng)彈窗進(jìn)行分類，然后分別分析每一類彈窗的應(yīng)用場(chǎng)景，以及在使用過(guò)程中需要注意的點(diǎn)。 摘要： 最為常見(jiàn)的【彈窗】反而是最捉摸不定的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場(chǎng)景下應(yīng)該用哪種彈窗。尤其是遇到二次確認(rèn)等場(chǎng)景…… 因此，打算從頭整理移動(dòng)彈窗的基礎(chǔ)知識(shí)，以iOS彈窗體系為切入點(diǎn)，從...
摘要：在小程序的開(kāi)發(fā)過(guò)程中，我們肯定會(huì)遇到開(kāi)發(fā)一個(gè)彈窗頁(yè)面的情況，我們先看一下小程序官方對(duì)于彈窗頁(yè)面的解釋。首頁(yè)我們先看一下動(dòng)態(tài)的效果圖我們首先看到的是首頁(yè)代碼原創(chuàng)作者小程序微信小程序開(kāi)發(fā)者社區(qū)點(diǎn)擊進(jìn)入彈窗演示頁(yè)面當(dāng)然了，重點(diǎn)不在于此。 在小程序的開(kāi)發(fā)過(guò)程中，我們肯定會(huì)遇到開(kāi)發(fā)一個(gè)彈窗頁(yè)面的情況，我們先看一下小程序官方對(duì)于彈窗頁(yè)面的解釋。API的接口如下showImg(https://seg...
閱讀 3661·2023-04-26 02:48
閱讀 1623·2021-10-11 10:57
閱讀 2627·2021-09-23 11:35
閱讀 1357·2021-09-06 15:02
閱讀 3445·2019-08-30 15:54
閱讀 1766·2019-08-30 15:44
閱讀 1034·2019-08-30 15:44
閱讀 1119·2019-08-30 12:52
