zoukankan      html  css  js  c++  java
  • NO---22 H5在ios端微信浏览器中,input事件触发后页面不复位的问题

    之前在做公众号网页时候在ios微信浏览器遇到一个奇怪的问题,就是input框失去焦点系统键盘收起后,页面还是处于向上滚动的状态,并没有复位成输入之前的状态。你再次点击页面时就已经错位了,目前只发现部分ios在微信浏览器有这个问题,所以只针对ios系统且在微信浏览器上做兼容就可以,这里在网上找到一个初版做了小优化,可以直接复制到一个JS,引用就好

    // 兼容部分ios手机input失焦后页面上移问题
    (function() {
      let myFunction
      let isWXAndIos = isWeiXinAndIos()
      if (isWXAndIos) { // 既是微信浏览器 又是ios============(因为查到只有在微信环境下,ios手机上才会出现input失去焦点的时候页面被顶起)
        document.body.addEventListener('focusin', () => { // 软键盘弹起事件
          clearTimeout(myFunction)
        })
        document.body.addEventListener('focusout', () => { // 软键盘关闭事件
          clearTimeout(myFunction)
          myFunction = setTimeout(function() {
            window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点  =======当键盘收起的时候让页面回到原始位置
          }, 200)
        })
      }
    })()
    
    function isWeiXinAndIos() {
      // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型
      let ua = '' + window.navigator.userAgent.toLowerCase()
      // 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
      let isWeixin = /MicroMessenger/i.test(ua) // 是在微信浏览器
      let isIos = /(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系统
      return isWeixin && isIos
    }
  • 相关阅读:
    【LeetCode】Validate Binary Search Tree
    【LeetCode】Search in Rotated Sorted Array II(转)
    【LeetCode】Search in Rotated Sorted Array
    【LeetCode】Set Matrix Zeroes
    【LeetCode】Sqrt(x) (转载)
    【LeetCode】Integer to Roman
    贪心算法
    【LeetCode】Best Time to Buy and Sell Stock III
    【LeetCode】Best Time to Buy and Sell Stock II
    CentOS 6 上安装 pip、setuptools
  • 原文地址:https://www.cnblogs.com/cb-bin/p/13266056.html
Copyright © 2011-2022 走看看