• 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
    }
  • 相关阅读:
    Git-本地项目和远程项目关联
    P1-Linux下安装MySQL及登录用户配置
    P2-Centos中安装vsftpd
    ElasticSearch安装及HEAD插件配置
    ArrayList源码分析
    Maven的继承以及import作用域
    单例模式浅析
    Vim快捷键记录(工作中遇到)
    OSX下 pip更新及安装python库
    统计工具之QQ图
  • 原文地址:https://www.cnblogs.com/cb-bin/p/13266056.html
Copyright © 2020-2023  润新知