开心一笑: 会买水果的狗狗

    关注微信公众号

    QQ群:831045818

    app下载

    当前位置:首页> React > 技术文档 > 正文
    react 苹果手机输入框 卡死解决
    发布时间:2019-12-11 09:19:43.0 浏览次数:
    componentDidMount() {
    	//处理 虚拟键盘问题
            this.dealVisual()
    }
    
     dealVisual=()=>{
    
            let isReset = true;
            const u = navigator.userAgent;
            const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            // alert(JSON.stringify(u));
            if (isiOS) {//ios
                document.body.addEventListener('focusin', () => {
                    //软键盘弹出的事件处理
                    isReset = false;
                });
                document.body.addEventListener('focusout', () => {
                    //软键盘收起的事件处理
                    isReset = true;
                    setTimeout(() => {
                        //当焦点在弹出层的输入框之间切换时先不归位
                        if (isReset) {
                            window.scroll(0, 0);//失焦后强制让页面归位
                        }
                    }, 300);
                });
            } else if (isAndroid) {//android
                let h = document.documentElement.clientHeight || document.body.clientHeight;
                window.onresize = function () {
                    //键盘弹起与隐藏都会引起窗口的高度发生变化
                    let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    if (resizeHeight < h) {
                        //当软键盘弹起,在此处操作
                        isReset = false;
                    } else {
                        //当软键盘收起,在此处操作
                        isReset = true;
                        setTimeout(() => {
                            if (isReset) {
                                window.scroll(0, 0);//失焦后强制让页面归位
                            }
                        }, 300);
                    }
                }
            }
        }


    关注"都市百货" 了解南陵

    微信咨询wanglf2r(不拉群 发广告者勿加)

    0
    0
    上一篇:react 深复制(2) seate 2个数据一样 修改一个另一个也变化 上一篇:关于公开征集张绍福、郑晓峰、贾明广 涉黑涉恶犯罪线索

    评论已有0

    提交评论

    热门评论

    南陵新闻
    公示公告
    常用查询
    风光南陵
    走出南陵
    友情链接