ios在微信浏览器当中input框失去焦点时,软键盘消失,但是页面会被顶起 @劉䔳

// 解决ios下软键盘关闭后页面位置出错的问题
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)
  })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容