h5 ios 滚动到底部_解决h5在ios 微信中 input框键盘收起 页面底部留白

本文介绍了一种方法来解决在iOS微信环境下,H5页面使用input输入框后,键盘收起时页面底部出现空白的问题。通过监听消息、调整页面滚动位置和处理表单元素的焦点状态,确保页面布局正确。
摘要由CSDN通过智能技术生成

; (function(window, document) {var browser ={

info: (function() {var u =navigator.userAgent;return{

trident: u.indexOf('Trident') > -1,

presto: u.indexOf('Presto') > -1,

webKit: u.indexOf('AppleWebKit') > -1,

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

mobile:!!u.match(/AppleWebKit.*Mobile.*/),

ios:!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,

iPhone: u.indexOf('iPhone') > -1,

iPad: u.indexOf('iPad') > -1,

webApp: u.indexOf('Safari') == -1,

weixin: u.indexOf('MicroMessenger') > -1,

weixinVersion:

u.match(/MicroMessenger\/([\d\.]+)/i) &&u.match(/MicroMessenger\/([\d\.]+)/i)[1],

qq: u.match(/\sQQ/i) == ' qq',

isAppIos: u.match(/auto_iphone/i),

isIos12:!!u

.toLowerCase()

.match(/cpu iphone os 12_\d[_\d]* like mac os/)

}

})(),

language: (navigator.browserLanguage||navigator.language).toLowerCase()

};//页面晃动

functionshake() {var oPadding = document.defaultView.getComputedStyle(document.body, 'paddingTop');var pTopVal = '';if (document.defaultView &&document.defaultView.getComputedStyle) {

pTopVal= oPadding['paddingTop'] || ''}if(pTopVal) {

document.body.style.paddingTop= "3px";

setTimeout(function() {if (pTopVal && pTopVal !== '3px') {

document.body.style.paddingTop=pTopVal

}else{

document.body.style.paddingTop= ""}

},400)

}else{

document.body.style.paddingTop= "3px";

setTimeout(function() {

document.body.style.paddingTop= ""},400)

}

_resetScrollTop()

}function_resetScrollTop() {var y = window.pageYOffset || window.scrollTop || document.documentElement.scrollTop ||document.body.scrollTopvar distance = 2

var topVal =yif (y > 0) {

topVal= y -distance

topVal= topVal < 0 ? 0: topVal

}else{

topVal+=distance

}

document.documentElement.scrollTop=topVal

setTimeout(function() {

document.documentElement.scrollTop=y

},400);

}//发送消息 【iframe 父页面】

functionemitShake() {

window.top&& window.top.postMessage && window.top.postMessage('dlrformshake', '*');

}//监听消息 [iframe 子页面]

functionaddMessageListner() {

window.addEventListener('message', function(e) {if (e.data === 'dlrformshake') {

shake()

}

})

}var _el = null

functionblurHandler() {if (_el &&_el.scrollIntoView) {

_el.scrollIntoViewIfNeeded?_el.scrollIntoViewIfNeeded() : _el.scrollIntoView()

}

shake()

emitShake()

}functionfixformMisplace() {function_clickHandler(e) {

_el= null

var el = e.target ||e.srcElement;if (el.nodeName.toLowerCase() === 'input' || el.nodeName.toLowerCase() === 'textarea' || el.nodeName.toLowerCase() === 'select') {if (!_checkEl(el)) { //checkbox readio submit

return}

_el=el

el.removeEventListener('blur', blurHandler)

el.addEventListener('blur', blurHandler, false)

_regFormAll()

}

}function_checkEl(el) {if (el.nodeName.toLowerCase() === 'input' && /checkbox|radio|submit/gi.test(el.getAttribute('type'))) { //checkbox readio submit

return false}return true}function _regFormAll() { //对表单其它input 再次注册

var els = document.querySelectorAll('input,textarea,select')for (var i = 0; i < els.length; i++) {var el =els[i]if(_checkEl(el)) {

}

}

}var context = document.body ||document.documentElement;

context.removeEventListener('click', _clickHandler);

context.addEventListener('click', _clickHandler, false)

addMessageListner()//iframe 父页面注册监听消息事件

}if (browser.info.mobile && browser.info.ios && (browser.info.weixin ||(browser.info.isAppIos))) {

_formFixInvoke()

}function_formFixInvoke() {

document.addEventListener('DOMContentLoaded', function() {if (!window.__isReg__fixformMisplace) {

fixformMisplace()

window.__isReg__fixformMisplace= true}

},false)if(document) {if (document.documentElement ||document.body) {

setTimeout(function() {if (!window.__isReg__fixformMisplace) {

fixformMisplace()

window.__isReg__fixformMisplace= true}

},60)

}

}

}

})(window, window.document)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值