H5页面关于android软键盘弹出顶起底部元素的解决方案

失败方案举例：

css3 监听代码（失败）：

---

 

document添加监听方法（失败）：

---

var h = window.innerHeight;
        var myInput = document.getElementsByTagName('input')[0];
        myInput.addEventListener('focus',handler,false);
        
        function handler(){
            $('body').height(h);
        }

通过 window.innerHeight 获取液面高度，判断页面高度改变，设定新的页面高度给当前页面

前提是弹出软键盘导致页面发生变化

document获取高度来判断是否弹出键盘（失败）：

---

heiht： 返回元素的高度或者说这个div的内容的高度，它是jquery对像，如果只是想取到某个内容的高度，那完全可以使用这个

offsetHeight：内容高+padding+边框

clientHeight:：内容的可视高度（不包括边框，边距或滚动条）

scrollHeight： 整个元素的高度（包括带滚动条的隐蔽的地方）

var screenHeight = document.body.offsetHeight;
        // 为window绑定resize事件
        window.onresize = function() {
            var nowHeight = document.body.offsetHeight;
            if(nowHeight < screenHeight) {
                // 将底部弹起的按钮隐藏（可使用给按钮添加相应消失类）
                $(".weui-footer_fixed-bottom").css("position","static");
            } else {
                // 将按钮正常显示（可使用给按钮移除相应消失类）
                $(".weui-footer_fixed-bottom").css("position","fixed");
            }
        }

 

成功方法：

通过resize方法监听，$(this).height()，获取页面高度，成功获得改变后的页面高度

---

var winHeight = $(window).height();   //获取当前页面高度
        $(window).resize(function(){
           var thisHeight=$(this).height();
            if(winHeight - thisHeight >50){
                 //当软键盘弹出，在这里面操作
            $(".copyRightCls").hide();
            }else{
                //当软键盘收起，在此处操作
            $(".copyRightCls").show();
            }
        });

this是html对象 $(this)是jq对象，调用jq对象的height()方法。

---

记录解决问题的过程，这个问题困扰了我一天，终于解决，希望能帮主到有需要的兄弟姐妹