解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后,页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开

//解决Android软键盘弹出覆盖h5页面输入框问题

window.addEventListener('resize', () => {
        if (document.activeElement.tagName == 'INPUT') {
            //延迟出现是因为有些 Android 手机键盘出现的比较慢
            window.setTimeout(() => {
                document.activeElement.scrollIntoViewIfNeeded();
            }, 100);
        } });

//在ios系统中输入框软键盘消失后,页面不回弹的问题

 var u = navigator.userAgent, app = navigator.appVersion
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    $(document).ready(function(){
        $("input").blur(function(){
            if (isIOS) {
                blurAdjust()
            }
        });
    });

// 解决苹果不回弹页面
function blurAdjust(e){
        setTimeout(()=>{
            // alert("1231321233")
            if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
                return
            }
            let result = 'pc';
            if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                result = 'ios'
            }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
                result = 'android'
            }

            if( result = 'ios' ){
                document.activeElement.scrollIntoViewIfNeeded(true);
            }
        },100)
    }

解决微信环境中键盘收起页面不回弹的问题

function isWeiXinAndIos(){
        const ua = `${window.navigator.userAgent.toLowerCase()}`;
        const isWeixin = /MicroMessenger/i.test(ua);
        const isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua);
        return isWeixin && isIos;
    }

    function weChatInputBug() { // 解决微信键盘收起页面不回弹的问题
        let myFunction;
        const isWXAndIos = this.isWeiXinAndIos();
        if (isWXAndIos) {
            document.body.addEventListener('focusin', () => {
                clearTimeout(myFunction);
            });
            document.body.addEventListener('focusout', () => {
                clearTimeout(myFunction);
                myFunction = setTimeout(() => {
                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
                }, 200);
            });
        }
    }
    weChatInputBug();

// 微信环境打开

function isWeiXin() {
        var ua = window.navigator.userAgent.toLowerCase();
        //判断企业微信和个人微信
        let isWx = ua.match(/MicroMessenger/i) == 'micromessenger';
        if(!isWx){
            return false;
        }else{
            let isWxWork = ua.match(/WxWork/i) == 'wxwork';
            if(isWxWork){
                return false;//企业微信
            }else{
                return true;//个人微信
            }
        }
        
		//只判断微信环境
        // if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        //     return true;
        // }else{
        //     return false;
        // }
    }
    if(!isWeiXin()){
        document.body.innerHTML='<p class="weixindes" style="margin:0.7rem auto 0;line-height: 1.7;padding:0 0.3rem;font-size:0.3rem;text-align: left;">' +
            '<span>因涉及到微信支付<span><br>\n' +
            '请使用个人微信扫码或点击右上角分享到个人微信,然后再次打开,献出您的爱心,谢谢</p>'
    }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值