解决h5在ios 微信中 input框键盘收起 页面底部留白
; (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() }; // 页面晃动 function shake() { 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.scrollTop var distance = 2 var topVal = y if (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 父页面】 function emitShake() { window.top && window.top.postMessage && window.top.postMessage('dlrformshake', '*'); } // 监听消息 [iframe 子页面] function addMessageListner() { window.addEventListener('message', function (e) { if (e.data === 'dlrformshake') { shake() } }) } var _el = null function blurHandler() { if (_el && _el.scrollIntoView) { _el.scrollIntoViewIfNeeded ? _el.scrollIntoViewIfNeeded() : _el.scrollIntoView() } shake() emitShake() } function fixformMisplace() { 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)
作者:简简人事
出处:http://www.cnblogs.com/codeon/
知乎:https://www.zhihu.com/org/jian-jian-ren-shi
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
出处:http://www.cnblogs.com/codeon/
知乎:https://www.zhihu.com/org/jian-jian-ren-shi
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。