// 解决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)
})
}
ios在微信浏览器当中input框失去焦点时，软键盘消失，但是页面会被顶起 @劉䔳
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- H5微信页面开发，软键盘弹起后，若原输入框被遮挡，页面整体将会上移，然而当输入框失焦，软键盘收起后，页面未恢复，导...
- IOS设备中的微信内部浏览器 html: JS: focus:function() { this.scro...
- 这个问题安卓和iOS端 出现的情况不一样，安卓的话会遮住input 框 这时候用到一个方法很给力 function...
- 1.Q:安卓机上1像素边框问题 A:引入一个border.css(如有需要可以私聊我) 2.Q:安卓机上input...
