• 安卓H5软键盘遮挡输入框


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

    1.input下方还有多余空位能够提供滚动

    那么只需要一句代码就可以处理

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

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

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

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

    下面是完整代码:

    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=" 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);
                });
            }
  • 相关阅读:
    序列化和反序列化
    自定义表达式解析器
    科学计算法帮助类MathUtils
    struts2接收参数的几种形式
    在matlab中实现遥感影像和shp文件的结合显示
    opencv实现正交匹配追踪算法OMP
    opencv实现canopy算法
    在matlab中实现线性回归和logistic回归
    在matlab中实现梯度下降法
    在matlab中实现PCA算法
  • 原文地址:https://www.cnblogs.com/lichuntian/p/9457736.html
Copyright © 2020-2023  润新知