安卓H5软键盘遮挡输入框

因为安卓app内嵌入H5页面,webview对于软键盘没有处理(若是不是产品强烈要求建议不要处理这种拆东墙补西墙的问题,由于其余的手机上可能会出现已经优化软键盘的状况)css

1.input下方还有多余空位可以提供滚动web

那么只须要一句代码就能够处理app

setTimeout(function(){
                        if('scrollIntoView' in document.activeElement) {
                            document.activeElement.scrollIntoView();
                        } else {
                            document.activeElement.scrollIntoViewIfNeeded();
                        }
                },400);

2.input下方没有多余空间给页面滚动到但是区域了(也就是说input在页面最下面而且不是浮动的)优化

那么咱们须要手动插入空白让页面有足够的空间进行1中的滚动this

append进去的元素要比scrollIntoView先执行不然不生效(最好有定时器)spa

下面是完整代码:code

var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1; 
        if (isAndroid) {
            //软键盘处理,建议不要处理
            var isredundant = false;
            $('.r-email,.r-code').on('blur', function(){//r-email和r-code是在最底下要处理的input元素
                    setTimeout(function(){//作定时器是为了要让focus触发后再判断占位元素状态再执行
                        if (isredundant) {
                            isredundant = false;
                        }else{
                            $('.redundant_div').css('display','none');
                            isredundant = false;
                        }
                    }, 100)
            })
            $('input[type="text"],textarea').on('focus', function () {
                if ($(this).attr('class') == 'r-email' || $(this).attr('class') == 'r-code') {
                    if ($('.redundant_div').length > 0) {//若是以前是已经有插入的占位元素的,那么给出标识,让blur的时候不隐藏占位元素
                        if ($('.redundant_div').css('display') != 'none') {//若是占位元素在就给状态
                            isredundant = true;
                        }
                        setTimeout(function(){//这里的定时器要比blur的长不然一直是隐藏的
                            $('.redundant_div').css('display','block')
                        },150)
                    }else{
                        $('.personal-data').append('<div class="redundant_div" style="width: 100%;height: 200px;"></div>')
                        setTimeout(function(){
                            $('.redundant_div').css('display','block')
                        },150)
                    }
                }
                setTimeout(function(){
                        // if (target.scrollIntoViewIfNeeded) {
                        //     target.scrollIntoViewIfNeeded();
                        // }
                        
                        if('scrollIntoView' in document.activeElement) {
                            document.activeElement.scrollIntoView();
                        } else {
                            document.activeElement.scrollIntoViewIfNeeded();
                        }
                },400);
            });
        }
相关文章
相关标签/搜索