摘要:描述打開系統(tǒng)的微信頁面,當(dāng)點(diǎn)擊輸入彈出輸入法的時候,頁面如果上移了,那輸入法收起的時候頁面無法自動回到底部,會留有空白,導(dǎo)致下次點(diǎn)擊彈起的失效。判斷是否為微信失去焦點(diǎn)事件亦可本文首發(fā)于個人博客完
1. BUG描述
打開 iOS 12 系統(tǒng)的微信 H5 頁面,當(dāng)點(diǎn)擊 input 輸入彈出輸入法的時候,頁面如果上移了,那輸入法收起的時候頁面無法自動回到底部,會留有空白,導(dǎo)致下次點(diǎn)擊彈起的失效。
上面三張圖中,第一張是未點(diǎn)擊的狀態(tài),第二張是點(diǎn)擊最后一個輸入框彈出輸入法的狀態(tài),第三張是收起輸入法的狀態(tài),可以發(fā)現(xiàn)在第三張圖中底部出現(xiàn)空白,頁面沒有下移返回底部。
2. 解決方法可以通過重置元素滾動位置,觸發(fā)回流(Reflow),從而消除底部空白。
// 判斷是否為 iOS 微信 isIOSWeChat () { const ua = window.navigator.userAgent.toLowerCase() return ua.includes("micromessenger") && ua.includes("like mac os x") } // input 失去焦點(diǎn)事件 inputBlur (e) { if (isIOSWeChat()) { // window.scrollTo(0, document.documentElement.scrollTop || document.body.scrollTop) 亦可 document.body.scrollTop = document.body.scrollTop; } }
本文首發(fā)于個人博客:https://www.aquatalking.com/b...
(完)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/108991.html
摘要:描述打開系統(tǒng)的微信頁面,當(dāng)點(diǎn)擊輸入彈出輸入法的時候,頁面如果上移了,那輸入法收起的時候頁面無法自動回到底部,會留有空白,導(dǎo)致下次點(diǎn)擊彈起的失效。判斷是否為微信失去焦點(diǎn)事件亦可本文首發(fā)于個人博客完 1. BUG描述 打開 iOS 12 系統(tǒng)的微信 H5 頁面,當(dāng)點(diǎn)擊 input 輸入彈出輸入法的時候,頁面如果上移了,那輸入法收起的時候頁面無法自動回到底部,會留有空白,導(dǎo)致下次點(diǎn)擊彈起的失...
摘要:然而,并沒有直接監(jiān)聽軟鍵盤的原生事件,只能通過軟鍵盤彈起或收起,引發(fā)頁面其他方面的表現(xiàn)間接監(jiān)聽,曲線救國。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時,輸入框失去焦點(diǎn),軟鍵盤收起。可以讓軟鍵盤彈起后,讓焦點(diǎn)元素再次滾到可視區(qū),強(qiáng)迫滾到位。 前言 最近一段時間在做 H5 聊天項(xiàng)目,踩過其中一大坑:輸入框獲取焦點(diǎn),軟鍵盤彈起,要求輸入框吸附(或頂)在輸入法框上。需求很明確,看似很簡單,其實(shí)不然。從...
摘要:問題描述微信頁面文本框失去焦點(diǎn)輸入法收回會留有空白設(shè)備系統(tǒng)版本微信版本解決方法判斷設(shè)備和微信環(huán)境 問題描述:ios微信H5頁面文本框失去焦點(diǎn)輸入法收回會留有空白; 設(shè)備:iphone XR 系統(tǒng)版本:ios 12.3.1 微信版本:7.3.1 解決方法 export default { data () { ...
摘要:問題描述微信頁面文本框失去焦點(diǎn)輸入法收回會留有空白設(shè)備系統(tǒng)版本微信版本解決方法判斷設(shè)備和微信環(huán)境 問題描述:ios微信H5頁面文本框失去焦點(diǎn)輸入法收回會留有空白; 設(shè)備:iphone XR 系統(tǒng)版本:ios 12.3.1 微信版本:7.3.1 解決方法 export default { data () { ...
閱讀 781·2021-11-09 09:47
閱讀 1567·2019-08-30 15:44
閱讀 1142·2019-08-26 13:46
閱讀 2106·2019-08-26 13:41
閱讀 1266·2019-08-26 13:32
閱讀 3771·2019-08-26 10:35
閱讀 3518·2019-08-23 17:16
閱讀 447·2019-08-23 17:07