解决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)

 

posted @ 2020-08-06 11:33  简简人事  阅读(501)  评论(0编辑  收藏  举报