zoukankan      html  css  js  c++  java
  • 解决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)

  • 相关阅读:
    一分钟学会 ConstraintLayout 之从属性角度理解布局
    halcon采集一幅图像
    halcon连续采集图像
    LinearLayout布局
    Html input 标签
    Html 标签种类
    Html div 标签
    Html span 标签
    Html h1-h6 标签
    Html br 标签
  • 原文地址:https://www.cnblogs.com/codeon/p/13445239.html
Copyright © 2011-2022 走看看