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

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

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

//在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)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 微信环境打开

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>'
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27