iOS12 系統 BUG —— 微信 H5 輸入法收起留有空白

pcChao 發布于2019-08-02 14:26 / 3172人閱讀

摘要：描述打開系統的微信頁面，當點擊輸入彈出輸入法的時候，頁面如果上移了，那輸入法收起的時候頁面無法自動回到底部，會留有空白，導致下次點擊彈起的失效。判斷是否為微信失去焦點事件亦可本文首發于個人博客完

1. BUG描述

打開 iOS 12 系統的微信 H5 頁面，當點擊 input 輸入彈出輸入法的時候，頁面如果上移了，那輸入法收起的時候頁面無法自動回到底部，會留有空白，導致下次點擊彈起的失效。

上面三張圖中，第一張是未點擊的狀態，第二張是點擊最后一個輸入框彈出輸入法的狀態，第三張是收起輸入法的狀態，可以發現在第三張圖中底部出現空白，頁面沒有下移返回底部。

2. 解決方法

可以通過重置元素滾動位置，觸發回流（Reflow），從而消除底部空白。

// 判斷是否為 iOS 微信
isIOSWeChat () {
  const ua = window.navigator.userAgent.toLowerCase()
  return ua.includes("micromessenger") && ua.includes("like mac os x")
}

// input 失去焦點事件
inputBlur (e) {
  if (isIOSWeChat()) {
    // window.scrollTo(0, document.documentElement.scrollTop || document.body.scrollTop) 亦可
    document.body.scrollTop = document.body.scrollTop; 
  }
}

本文首發于個人博客：https://www.aquatalking.com/b...

（完）

云服務器 GPU云服務器 ios微信h5webrtc 蘋果ios12系統正式版下載 ios webrtc bug WebRTC 屏幕共享 ios bug

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

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

iOS12 系統 BUG —— 微信 H5 輸入法收起留有空白

摘要：描述打開系統的微信頁面，當點擊輸入彈出輸入法的時候，頁面如果上移了，那輸入法收起的時候頁面無法自動回到底部，會留有空白，導致下次點擊彈起的失效。判斷是否為微信失去焦點事件亦可本文首發于個人博客完 1. BUG描述打開 iOS 12 系統的微信 H5 頁面，當點擊 input 輸入彈出輸入法的時候，頁面如果上移了，那輸入法收起的時候頁面無法自動回到底部，會留有空白，導致下次點擊彈起的失...

TigerChain 2019-08-26 13:32 評論0 收藏0
可能這些是你想要的H5軟鍵盤兼容方案

摘要：然而，并沒有直接監聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區，強迫滾到位。前言最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...

stackvoid 2019-08-23 17:05 評論0 收藏0
【解決】ios 12.3.1 微信H5頁面文本框失去焦點后輸入法收回空白( vue )

摘要：問題描述微信頁面文本框失去焦點輸入法收回會留有空白設備系統版本微信版本解決方法判斷設備和微信環境問題描述：ios微信H5頁面文本框失去焦點輸入法收回會留有空白；設備：iphone XR 系統版本：ios 12.3.1 微信版本：7.3.1 解決方法 export default { data () { ...

MartinDai 2019-08-02 15:29 評論0 收藏0
【解決】ios 12.3.1 微信H5頁面文本框失去焦點后輸入法收回空白( vue )

摘要：問題描述微信頁面文本框失去焦點輸入法收回會留有空白設備系統版本微信版本解決方法判斷設備和微信環境問題描述：ios微信H5頁面文本框失去焦點輸入法收回會留有空白；設備：iphone XR 系統版本：ios 12.3.1 微信版本：7.3.1 解決方法 export default { data () { ...

VioletJack 2019-08-23 18:35 評論0 收藏0