移动端点击input出现虚拟键盘对fixed的判断

场景描述， 当document的高度不够window的高度时候，如在ip6中文档的高度比窗体的高度小，到底设计在最下方的区域没有在窗体最下方，就留有空白地方如下图的灰色部分

01.png

1、 解决初始化文档高度，让文档高度等于窗体高度，并fixed需要定位的区域在最下方

(function bottonm(){  
            if($(document).height()<$(window).height()){  
                $('.bottom_fix').css({'position':'fixed','bottom':'0px'});  
                $(document).height($(window).height()+'px');  
            }  
        })();  

2、解决输入框input获取焦点得时，虚拟键盘会把fixed元素顶上去(次现在在部分安卓上能发现)如下图

02.png

$('#phone').bind('focus',function(){  
            $('.bottom_fix').css('position','static');  
            //或者$('#viewport').height($(window).height()+'px');  
        }).bind('blur',function(){  
            $('.bottom_fix').css({'position':'fixed','bottom':'0'});  
            //或者$('#viewport').height('auto');  
        });  

 //02

var clickObj=$(".dd");
var obj=$(".Submit");
clickObj.on('focus',function(){
    obj.css('position','static');
}).on('blur',function(){
    obj.css({'position':'fixed','bottom':'2.4rem'});
});
 
function focusBlur(clickID,Id){
      var clickObj=document.getElementById(clickID);
      var obj=document.getElementById(Id);
      clickObj.onfocus = function(){
          obj.style.position='static';
          obj.style.bottom='none';
          console.log(111);
      };
      clickObj.onblur = function(){
          obj.style.position='fixed'
          obj.style.bottom='2.4rem';
          console.log(222);
      };
}
focusBlur('dd' , 'Submit');
focusBlur('dd1' , 'Submit');

3解决屏幕旋转也会出现以上问题

$(document).bind('orientationchange',function(){  
            if(window.orientation==90 || window.orientation==-90){  
                $('.bottom_fix').css('position','static');  
            }else{  
                $('.bottom_fix').css({'position':'fixed','bottom':'0'});  
            }  
        });  

4 [解决谷歌浏览器中的input背景色默认是黄色]

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

5 [H5禁止手机自带键盘弹出]

        

            
        
        

            
        
    

$("#datePicker").focus(function(){
        document.activeElement.blur();
    });
$("#datePicker2").focus(function(){
        document.activeElement.blur();
    });

参考原文地址 ：kongjiea笔记

移动端滚动穿透的问题解决
https://blog.csdn.net/kingrome2017/article/details/80038410

移动端点击input出现虚拟键盘对fixed的判断

H5禁止手机自带键盘弹出
解决谷歌浏览器中的input背景色默认是黄色