H5的IOS端软键盘错位兼容解决

最新推荐文章于 2025-04-08 10:33:10 发布

原创最新推荐文章于 2025-04-08 10:33:10 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

SJF - JS 专栏收录该内容

7 篇文章

订阅专栏

在IOS12以上的微信端，iPhoneX和华为保时捷型号微信购物时，input弹出后结算按钮点击无反应。分析发现是IOS端第三方输入法软键盘弹出后焦点无法复位导致，还给出了实际调试代码，需在页面script内加入相关内容并给input加class。

参考至： https://mp.weixin.qq.com/s/u1KIkWm-1VFu4r8VzvB5Dg

问题描述：在IOS12以上的微信端，iPhoneX的型号和华为保时捷的型号的微信购物，出现input弹出后结算按钮点击无反应的情况。

分析：是由于IOS端第三方输入法的软键盘弹出后，焦点无法复位。

实际调试代码如下：

在页面script内加入，将需要调整的input加上class=“input”。

<script>    
    //20190430 susie h5软键盘错位兼容处理
    // 监听函数
    function listenKeybord(jinput) {    
        //判断是否是ios
        var ua = window.navigator.userAgent.toLocaleLowerCase();
        var isIOS = /iphone|ipad|ipod/.test(ua);
       // var isAndroid = /android/.test(ua);   
       //判断是不是ios ios进行处理
        if (isIOS) {
           // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
            jinput.addEventListener('focus', function () {               
                //alert('IOS 键盘弹起啦！');
                // IOS 键盘弹起后操作
                //键盘弹起后逻辑代码
            }, false); 
            jinput.addEventListener('blur', function () {                              
                //alert('IOS 键盘收起啦！');
                //收齐后逻辑代码，让上面的下来
                var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
                if (!wechatInfo) return;
                var wechatVersion = wechatInfo[1];
                var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                if(+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12){
                  window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
                }
            });
        }
    }
    //页面加载完成后遍历所有input执行监听
    jQuery(document).ready(function(){
        var vinputs = document.querySelectorAll('.input');
        for (var i = 0; i < vinputs.length; i++) {
            listenKeybord(vinputs[i]);
        }
    })
</script>