2019-08-26

<!--解决ios下软键盘关闭后页面位置出错的问题-->

<script>

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  isIos

}

// 兼容部分ios手机input失焦后页面上移问题

  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)

    })

  }

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、HTTP协议回顾: 1. HTTP协议概述 WEB浏览器与WEB服务器之间的一问一答的交互过程必须遵循一定的规...
    叁鎶阅读 325评论 0 0
  • 1.Retrofit2概述 Retrofit框架是Square公司出品的目前非常流行的网络框架.效率高,实现简单,...
    叁鎶阅读 524评论 0 0
  • js的类和对象的创建的技术 一:类和对象的调用 Js代码 二:函数创建对象 this指当前类的属性与java相似(...
    Klxxin阅读 245评论 0 0
  • js对象。可以认为是变量的容器,类似键值对的形式。访问对象属性的时候,也是通过 对象.属性 的形式。对象的方法(...
    FiringAce阅读 94评论 0 0
  • 今天在《爱你就像爱生命》里看到王小波先生写给李银河的一段话: 你想知道我对你的爱情是什麽吗?就是你高兴我也高兴,你...
    Jessieinhk阅读 142评论 0 1